<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="api">
        <meta name="product" content="kendo-ui">
        
        <title>Configuration, methods and events of Kendo UI DataViz StockChart</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        <script src="/assets/dojo.js?cb=545f7f252dd3279c5a236b777c1668f1"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("api/javascript/dataviz/ui/stock-chart.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//api/javascript/dataviz/ui/stock-chart.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    <div id="markdown-toc"></div>

    <div id="page-article">
        <article>
            
             <h1 id="kendodatavizuistockchart"><a href="#kendodatavizuistockchart">kendo.dataviz.ui.StockChart</a></h1>

<h2 id="configuration"><a href="#configuration">Configuration</a></h2>

<h3 id="configuration-dateField">
<a href="#configuration-dateField">dateField </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "date")</em>
</h3>

<p>The field containing the point date.
It is used as a default <code>categoryField</code> for all series.</p>

<p>The data item field value must be either:</p>

<ul>
<li><p>Date instance</p></li>
<li><p>String parsable by <code>new Date([field value])</code></p></li>
<li><p>String in ASP.NET JSON format, i.e. "\/Date(1320825600000-0800)\/"</p></li>
</ul>

<h3 id="configuration-navigator">
<a href="#configuration-navigator">navigator </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The data navigator configuration options.</p>

<h3 id="configuration-navigator.categoryAxis">
<a href="#configuration-navigator.categoryAxis">navigator.categoryAxis </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The category axis configuration options.</p>

<h3 id="configuration-navigator.categoryAxis.autoBaseUnitSteps">
<a href="#configuration-navigator.categoryAxis.autoBaseUnitSteps">navigator.categoryAxis.autoBaseUnitSteps </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The discrete <a href="#configuration-navigator-categoryAxis.baseUnitStep">navigator.categoryAxis.baseUnitStep</a> values when
either <a href="#configuration-navigator-categoryAxis.baseUnit">navigator.categoryAxis.baseUnit</a> is set to "fit" or
<a href="#configuration-navigator-categoryAxis.baseUnitStep">navigator.categoryAxis.baseUnitStep</a> is set to "auto".</p>

<h3 id="configuration-navigator.categoryAxis.autoBaseUnitSteps.seconds">
<a href="#configuration-navigator.categoryAxis.autoBaseUnitSteps.seconds">navigator.categoryAxis.autoBaseUnitSteps.seconds </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a> <em>(default: [1, 2, 5, 15, 30])</em>
</h3>

<p>The seconds unit steps.</p>

<h3 id="configuration-navigator.categoryAxis.autoBaseUnitSteps.minutes">
<a href="#configuration-navigator.categoryAxis.autoBaseUnitSteps.minutes">navigator.categoryAxis.autoBaseUnitSteps.minutes </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a> <em>(default: [1, 2, 5, 15, 30])</em>
</h3>

<p>The minutes unit steps.</p>

<h3 id="configuration-navigator.categoryAxis.autoBaseUnitSteps.hours">
<a href="#configuration-navigator.categoryAxis.autoBaseUnitSteps.hours">navigator.categoryAxis.autoBaseUnitSteps.hours </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a> <em>(default: [1, 2, 3])</em>
</h3>

<p>The hours unit steps.</p>

<h3 id="configuration-navigator.categoryAxis.autoBaseUnitSteps.days">
<a href="#configuration-navigator.categoryAxis.autoBaseUnitSteps.days">navigator.categoryAxis.autoBaseUnitSteps.days </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a> <em>(default: [1, 2, 3])</em>
</h3>

<p>The days unit steps.</p>

<h3 id="configuration-navigator.categoryAxis.autoBaseUnitSteps.weeks">
<a href="#configuration-navigator.categoryAxis.autoBaseUnitSteps.weeks">navigator.categoryAxis.autoBaseUnitSteps.weeks </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a> <em>(default: [1, 2])</em>
</h3>

<p>The weeks unit steps.</p>

<h3 id="configuration-navigator.categoryAxis.autoBaseUnitSteps.months">
<a href="#configuration-navigator.categoryAxis.autoBaseUnitSteps.months">navigator.categoryAxis.autoBaseUnitSteps.months </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a> <em>(default: [1, 2, 3, 6])</em>
</h3>

<p>The months unit steps.</p>

<h3 id="configuration-navigator.categoryAxis.autoBaseUnitSteps.years">
<a href="#configuration-navigator.categoryAxis.autoBaseUnitSteps.years">navigator.categoryAxis.autoBaseUnitSteps.years </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a> <em>(default: [1, 2, 3, 5, 10, 25, 50])</em>
</h3>

<p>The years unit steps.</p>

<h3 id="configuration-navigator.categoryAxis.axisCrossingValue">
<a href="#configuration-navigator.categoryAxis.axisCrossingValue">navigator.categoryAxis.axisCrossingValue </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" class="type-link"><code>Date |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>Category index at which the first value axis crosses this axis (when set as an object).</p>

<p>Category indices at which the value axes cross the category axis (when set as an array).</p>

<blockquote>
<p>set an index greater than or equal to the number of categories to denote the far end of the axis.</p>
</blockquote>

<h3 id="configuration-navigator.categoryAxis.background">
<a href="#configuration-navigator.categoryAxis.background">navigator.categoryAxis.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the axis.</p>

<h3 id="configuration-navigator.categoryAxis.baseUnit">
<a href="#configuration-navigator.categoryAxis.baseUnit">navigator.categoryAxis.baseUnit </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The base time interval for the date axis. The default base unit is determined automatically from the minimum difference
between subsequent categories.</p>

<p>The supported values are:</p>

<ul>
<li>"fit"</li>
<li>"seconds"</li>
<li>"minutes"</li>
<li>"hours"</li>
<li>"days"</li>
<li>"weeks"</li>
<li>"months"</li>
<li>"years"</li>
</ul>

<p>Setting <code>baseUnit</code> to "fit" will set such base unit and <a href="#configuration-categoryAxis.baseUnitStep">categoryAxis.baseUnitStep</a>
that the total number of categories does not exceed <a href="#configuration-categoryAxis.maxDateGroups">categoryAxis.maxDateGroups</a>.</p>

<p>Series data is aggregated for the specified base unit using the <a href="#configuration-series.aggregate">series.aggregate</a> function.</p>

<h3 id="configuration-navigator.categoryAxis.baseUnitStep">
<a href="#configuration-navigator.categoryAxis.baseUnitStep">navigator.categoryAxis.baseUnitStep </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> <em>(default: 1)</em>
</h3>

<p>The step (interval) between categories in base units. Setting it to "auto" will set the step to such value
that the total number of categories does not exceed <a href="#configuration-categoryAxis.maxDateGroups">categoryAxis.maxDateGroups</a>.</p>

<p>This option is ignored if <a href="#configuration-categoryAxis.baseUnit">categoryAxis.baseUnit</a> is set to "fit".</p>

<h3 id="configuration-navigator.categoryAxis.categories">
<a href="#configuration-navigator.categoryAxis.categories">navigator.categoryAxis.categories </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>The category names. The chart will create a category for every item of the array.</p>

<h3 id="configuration-navigator.categoryAxis.color">
<a href="#configuration-navigator.categoryAxis.color">navigator.categoryAxis.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The color to apply to all axis elements. Accepts a valid CSS color string, including hex and rgb. Can be overridden by <a href="#configuration-categoryAxis.labels.color">categoryAxis.labels.color</a> and
<a href="#configuration-categoryAxis.line.color">categoryAxis.line.color</a>.</p>

<h3 id="configuration-navigator.categoryAxis.crosshair">
<a href="#configuration-navigator.categoryAxis.crosshair">navigator.categoryAxis.crosshair </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The crosshair configuration options.</p>

<blockquote>
<p>The crosshair is displayed when the <a href="#configuration-categoryAxis.crosshair.visible">categoryAxis.crosshair.visible</a> option is set to <code>true</code>.</p>
</blockquote>

<h3 id="configuration-navigator.categoryAxis.crosshair.color">
<a href="#configuration-navigator.categoryAxis.crosshair.color">navigator.categoryAxis.crosshair.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The color of the crosshair. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-navigator.categoryAxis.crosshair.dashType">
<a href="#configuration-navigator.categoryAxis.crosshair.dashType">navigator.categoryAxis.crosshair.dashType </a><code>string</code> <em>(default: "solid")</em>
</h3>

<p>The dash type of the crosshair.</p>

<p>The following dash types are supported:</p>

<ul>
<li>"dash" - a line consisting of dashes</li>
<li>"dashDot" - a line consisting of a repeating pattern of dash-dot</li>
<li>"dot" - a line consisting of dots</li>
<li>"longDash" - a line consisting of a repeating pattern of long-dash</li>
<li>"longDashDot" - a line consisting of a repeating pattern of long-dash-dot</li>
<li>"longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot</li>
<li>"solid" - a solid line</li>
</ul>

<h3 id="configuration-navigator.categoryAxis.crosshair.opacity">
<a href="#configuration-navigator.categoryAxis.crosshair.opacity">navigator.categoryAxis.crosshair.opacity </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>The opacity of the crosshair. By default the crosshair is opaque.</p>

<h3 id="configuration-navigator.categoryAxis.crosshair.tooltip">
<a href="#configuration-navigator.categoryAxis.crosshair.tooltip">navigator.categoryAxis.crosshair.tooltip </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The crosshair tooltip options.</p>

<blockquote>
<p>The crosshair tooltip is displayed when the <a href="#configuration-categoryAxis.crosshair.tooltip.visible">categoryAxis.crosshair.tooltip.visible</a> option is set to <code>true</code>.</p>
</blockquote>

<h3 id="configuration-navigator.categoryAxis.crosshair.tooltip.background">
<a href="#configuration-navigator.categoryAxis.crosshair.tooltip.background">navigator.categoryAxis.crosshair.tooltip.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the tooltip. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-navigator.categoryAxis.crosshair.tooltip.border">
<a href="#configuration-navigator.categoryAxis.crosshair.tooltip.border">navigator.categoryAxis.crosshair.tooltip.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border options.</p>

<h3 id="configuration-navigator.categoryAxis.crosshair.tooltip.border.color">
<a href="#configuration-navigator.categoryAxis.crosshair.tooltip.border.color">navigator.categoryAxis.crosshair.tooltip.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "black")</em>
</h3>

<p>The color of the border. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-navigator.categoryAxis.crosshair.tooltip.border.dashType">
<a href="#configuration-navigator.categoryAxis.crosshair.tooltip.border.dashType">navigator.categoryAxis.crosshair.tooltip.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<p>The following dash types are supported:</p>

<ul>
<li>"dash" - a line consisting of dashes</li>
<li>"dashDot" - a line consisting of a repeating pattern of dash-dot</li>
<li>"dot" - a line consisting of dots</li>
<li>"longDash" - a line consisting of a repeating pattern of long-dash</li>
<li>"longDashDot" - a line consisting of a repeating pattern of long-dash-dot</li>
<li>"longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot</li>
<li>"solid" - a solid line</li>
</ul>

<h3 id="configuration-navigator.categoryAxis.crosshair.tooltip.border.width">
<a href="#configuration-navigator.categoryAxis.crosshair.tooltip.border.width">navigator.categoryAxis.crosshair.tooltip.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.</p>

<h3 id="configuration-navigator.categoryAxis.crosshair.tooltip.color">
<a href="#configuration-navigator.categoryAxis.crosshair.tooltip.color">navigator.categoryAxis.crosshair.tooltip.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the tooltip. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-navigator.categoryAxis.crosshair.tooltip.font">
<a href="#configuration-navigator.categoryAxis.crosshair.tooltip.font">navigator.categoryAxis.crosshair.tooltip.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "12px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The tooltip font.</p>

<h3 id="configuration-navigator.categoryAxis.crosshair.tooltip.format">
<a href="#configuration-navigator.categoryAxis.crosshair.tooltip.format">navigator.categoryAxis.crosshair.tooltip.format </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "{0}")</em>
</h3>

<p>The format used to display the tooltip. Uses <a href="/api/framework/kendo#methods-format">kendo.format</a>. Contains one placeholder ("{0}") which represents the category value.</p>

<h3 id="configuration-navigator.categoryAxis.crosshair.tooltip.padding">
<a href="#configuration-navigator.categoryAxis.crosshair.tooltip.padding">navigator.categoryAxis.crosshair.tooltip.padding </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> <em>(default: 0)</em>
</h3>

<p>The padding of the crosshair tooltip. A numeric value will set all paddings.</p>

<h3 id="configuration-navigator.categoryAxis.crosshair.tooltip.padding.bottom">
<a href="#configuration-navigator.categoryAxis.crosshair.tooltip.padding.bottom">navigator.categoryAxis.crosshair.tooltip.padding.bottom </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The bottom padding of the crosshair tooltip.</p>

<h3 id="configuration-navigator.categoryAxis.crosshair.tooltip.padding.left">
<a href="#configuration-navigator.categoryAxis.crosshair.tooltip.padding.left">navigator.categoryAxis.crosshair.tooltip.padding.left </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The left padding of the crosshair tooltip.</p>

<h3 id="configuration-navigator.categoryAxis.crosshair.tooltip.padding.right">
<a href="#configuration-navigator.categoryAxis.crosshair.tooltip.padding.right">navigator.categoryAxis.crosshair.tooltip.padding.right </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The right padding of the crosshair tooltip.</p>

<h3 id="configuration-navigator.categoryAxis.crosshair.tooltip.padding.top">
<a href="#configuration-navigator.categoryAxis.crosshair.tooltip.padding.top">navigator.categoryAxis.crosshair.tooltip.padding.top </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The top padding of the crosshair tooltip.</p>

<h3 id="configuration-navigator.categoryAxis.crosshair.tooltip.template">
<a href="#configuration-navigator.categoryAxis.crosshair.tooltip.template">navigator.categoryAxis.crosshair.tooltip.template </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The <a href="/api/framework/kendo#methods-template">template</a> which renders the tooltip.</p>

<p>The fields which can be used in the template are:</p>

<ul>
<li>value - the category value</li>
</ul>

<h3 id="configuration-navigator.categoryAxis.crosshair.tooltip.visible">
<a href="#configuration-navigator.categoryAxis.crosshair.tooltip.visible">navigator.categoryAxis.crosshair.tooltip.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: false)</em>
</h3>

<p>If set to <code>true</code> the chart will display the category axis crosshair tooltip. By default the category axis crosshair tooltip is not visible.</p>

<h3 id="configuration-navigator.categoryAxis.crosshair.visible">
<a href="#configuration-navigator.categoryAxis.crosshair.visible">navigator.categoryAxis.crosshair.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: false)</em>
</h3>

<p>If set to <code>true</code> the chart will display the category axis crosshair. By default the category axis crosshair is not visible.</p>

<h3 id="configuration-navigator.categoryAxis.crosshair.width">
<a href="#configuration-navigator.categoryAxis.crosshair.width">navigator.categoryAxis.crosshair.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>The width of the crosshair in pixels.</p>

<h3 id="configuration-navigator.categoryAxis.field">
<a href="#configuration-navigator.categoryAxis.field">navigator.categoryAxis.field </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The data item field which contains the category name. Requires the <a href="#configuration-dataSource">dataSource</a> option to be set.</p>

<h3 id="configuration-navigator.categoryAxis.justified">
<a href="#configuration-navigator.categoryAxis.justified">navigator.categoryAxis.justified </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a>
</h3>

<p>If set to <code>true</code> the chart will position categories and series points on major ticks. This removes the empty space before and after the series.</p>

<p>The default value is <code>false</code> except for "area" and "verticalArea".</p>

<blockquote>
<p>This option is ignored if the <a href="#configuration-series.type">series.type</a> option is set to "bar", "column", "ohlc" or "candlestick".</p>
</blockquote>

<h3 id="configuration-navigator.categoryAxis.labels">
<a href="#configuration-navigator.categoryAxis.labels">navigator.categoryAxis.labels </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The axis labels configuration.</p>

<h3 id="configuration-navigator.categoryAxis.labels.background">
<a href="#configuration-navigator.categoryAxis.labels.background">navigator.categoryAxis.labels.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the labels. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-navigator.categoryAxis.labels.border">
<a href="#configuration-navigator.categoryAxis.labels.border">navigator.categoryAxis.labels.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the labels.</p>

<h3 id="configuration-navigator.categoryAxis.labels.border.color">
<a href="#configuration-navigator.categoryAxis.labels.border.color">navigator.categoryAxis.labels.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "black")</em>
</h3>

<p>The color of the border. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-navigator.categoryAxis.labels.border.dashType">
<a href="#configuration-navigator.categoryAxis.labels.border.dashType">navigator.categoryAxis.labels.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<p>The following dash types are supported:</p>

<ul>
<li>"dash" - a line consisting of dashes</li>
<li>"dashDot" - a line consisting of a repeating pattern of dash-dot</li>
<li>"dot" - a line consisting of dots</li>
<li>"longDash" - a line consisting of a repeating pattern of long-dash</li>
<li>"longDashDot" - a line consisting of a repeating pattern of long-dash-dot</li>
<li>"longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot</li>
<li>"solid" - a solid line</li>
</ul>

<h3 id="configuration-navigator.categoryAxis.labels.border.width">
<a href="#configuration-navigator.categoryAxis.labels.border.width">navigator.categoryAxis.labels.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.</p>

<h3 id="configuration-navigator.categoryAxis.labels.color">
<a href="#configuration-navigator.categoryAxis.labels.color">navigator.categoryAxis.labels.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the labels. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-navigator.categoryAxis.labels.culture">
<a href="#configuration-navigator.categoryAxis.labels.culture">navigator.categoryAxis.labels.culture </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The culture to use when formatting date values. See the <a href="/framework/globalization/overview">globalization overview</a> for more information.</p>

<h3 id="configuration-navigator.categoryAxis.labels.dateFormats">
<a href="#configuration-navigator.categoryAxis.labels.dateFormats">navigator.categoryAxis.labels.dateFormats </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The format used to display the labels when the categories are dates. Uses <a href="/api/framework/kendo#methods-format">kendo.format</a>. Contains one placeholder ("{0}") which represents the category value.</p>

<blockquote>
<p>The chart will choose the appropriate format for the current <a href="#configuration-categoryAxis.baseUnit">categoryAxis.baseUnit</a>. Setting the <a href="#configuration-categoryAxis.labels.format">categoryAxis.labels.format</a> option will override the date formats.</p>
</blockquote>

<h3 id="configuration-navigator.categoryAxis.labels.dateFormats.days">
<a href="#configuration-navigator.categoryAxis.labels.dateFormats.days">navigator.categoryAxis.labels.dateFormats.days </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "M/d")</em>
</h3>

<p>The format used when <a href="#configuration-categoryAxis.baseUnit">categoryAxis.baseUnit</a> is set to "days".</p>

<h3 id="configuration-navigator.categoryAxis.labels.dateFormats.hours">
<a href="#configuration-navigator.categoryAxis.labels.dateFormats.hours">navigator.categoryAxis.labels.dateFormats.hours </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "HH:mm")</em>
</h3>

<p>The format used when <a href="#configuration-categoryAxis.baseUnit">categoryAxis.baseUnit</a> is set to "hours".</p>

<h3 id="configuration-navigator.categoryAxis.labels.dateFormats.months">
<a href="#configuration-navigator.categoryAxis.labels.dateFormats.months">navigator.categoryAxis.labels.dateFormats.months </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "MMM 'yy")</em>
</h3>

<p>The format used when <a href="#configuration-categoryAxis.baseUnit">categoryAxis.baseUnit</a> is set to "months".</p>

<h3 id="configuration-navigator.categoryAxis.labels.dateFormats.weeks">
<a href="#configuration-navigator.categoryAxis.labels.dateFormats.weeks">navigator.categoryAxis.labels.dateFormats.weeks </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "M/d")</em>
</h3>

<p>The format used when <a href="#configuration-categoryAxis.baseUnit">categoryAxis.baseUnit</a> is set to "weeks".</p>

<h3 id="configuration-navigator.categoryAxis.labels.dateFormats.years">
<a href="#configuration-navigator.categoryAxis.labels.dateFormats.years">navigator.categoryAxis.labels.dateFormats.years </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "yyyy")</em>
</h3>

<p>The format used when <a href="#configuration-categoryAxis.baseUnit">categoryAxis.baseUnit</a> is set to "years".</p>

<h3 id="configuration-navigator.categoryAxis.labels.font">
<a href="#configuration-navigator.categoryAxis.labels.font">navigator.categoryAxis.labels.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "12px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The font style of the labels.</p>

<h3 id="configuration-navigator.categoryAxis.labels.format">
<a href="#configuration-navigator.categoryAxis.labels.format">navigator.categoryAxis.labels.format </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "{0}")</em>
</h3>

<p>The format used to display the labels. Uses <a href="/api/framework/kendo#methods-format">kendo.format</a>. Contains one placeholder ("{0}") which represents the category value.</p>

<h3 id="configuration-navigator.categoryAxis.labels.margin">
<a href="#configuration-navigator.categoryAxis.labels.margin">navigator.categoryAxis.labels.margin </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> <em>(default: 0)</em>
</h3>

<p>The margin of the labels. A numeric value will set all margins.</p>

<h3 id="configuration-navigator.categoryAxis.labels.margin.bottom">
<a href="#configuration-navigator.categoryAxis.labels.margin.bottom">navigator.categoryAxis.labels.margin.bottom </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The bottom margin of the labels.</p>

<h3 id="configuration-navigator.categoryAxis.labels.margin.left">
<a href="#configuration-navigator.categoryAxis.labels.margin.left">navigator.categoryAxis.labels.margin.left </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The left margin of the labels.</p>

<h3 id="configuration-navigator.categoryAxis.labels.margin.right">
<a href="#configuration-navigator.categoryAxis.labels.margin.right">navigator.categoryAxis.labels.margin.right </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The right margin of the labels.</p>

<h3 id="configuration-navigator.categoryAxis.labels.margin.top">
<a href="#configuration-navigator.categoryAxis.labels.margin.top">navigator.categoryAxis.labels.margin.top </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The top margin of the labels.</p>

<h3 id="configuration-navigator.categoryAxis.labels.mirror">
<a href="#configuration-navigator.categoryAxis.labels.mirror">navigator.categoryAxis.labels.mirror </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: false)</em>
</h3>

<p>If set to <code>true</code> the chart will mirror the axis labels and ticks. If the labels are normally on the left side of the axis, mirroring the axis will render them to the right.</p>

<h3 id="configuration-navigator.categoryAxis.labels.padding">
<a href="#configuration-navigator.categoryAxis.labels.padding">navigator.categoryAxis.labels.padding </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The padding of the labels. A numeric value will set all paddings.</p>

<h3 id="configuration-navigator.categoryAxis.labels.padding.bottom">
<a href="#configuration-navigator.categoryAxis.labels.padding.bottom">navigator.categoryAxis.labels.padding.bottom </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The bottom padding of the labels.</p>

<h3 id="configuration-navigator.categoryAxis.labels.padding.left">
<a href="#configuration-navigator.categoryAxis.labels.padding.left">navigator.categoryAxis.labels.padding.left </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The left padding of the labels.</p>

<h3 id="configuration-navigator.categoryAxis.labels.padding.right">
<a href="#configuration-navigator.categoryAxis.labels.padding.right">navigator.categoryAxis.labels.padding.right </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The right padding of the labels.</p>

<h3 id="configuration-navigator.categoryAxis.labels.padding.top">
<a href="#configuration-navigator.categoryAxis.labels.padding.top">navigator.categoryAxis.labels.padding.top </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The top padding of the labels.</p>

<h3 id="configuration-navigator.categoryAxis.labels.rotation">
<a href="#configuration-navigator.categoryAxis.labels.rotation">navigator.categoryAxis.labels.rotation </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The rotation angle of the labels. By default the labels are not rotated.</p>

<h3 id="configuration-navigator.categoryAxis.labels.skip">
<a href="#configuration-navigator.categoryAxis.labels.skip">navigator.categoryAxis.labels.skip </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The number of labels to skip. By default no labels are skipped.</p>

<h3 id="configuration-navigator.categoryAxis.labels.step">
<a href="#configuration-navigator.categoryAxis.labels.step">navigator.categoryAxis.labels.step </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>The label rendering step - render every n-th label. By default every label is rendered.</p>

<h3 id="configuration-navigator.categoryAxis.labels.template">
<a href="#configuration-navigator.categoryAxis.labels.template">navigator.categoryAxis.labels.template </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The <a href="/api/framework/kendo#methods-template">template</a> which renders the labels.</p>

<p>The fields which can be used in the template are:</p>

<ul>
<li>value - the category value</li>
</ul>

<h3 id="configuration-navigator.categoryAxis.labels.visible">
<a href="#configuration-navigator.categoryAxis.labels.visible">navigator.categoryAxis.labels.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: true)</em>
</h3>

<p>If set to <code>true</code> the chart will display the category axis labels. By default the category axis labels are visible.</p>

<h3 id="configuration-navigator.categoryAxis.line">
<a href="#configuration-navigator.categoryAxis.line">navigator.categoryAxis.line </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The configuration of the axis lines. Also affects the major and minor ticks, but not the grid lines.</p>

<h3 id="configuration-navigator.categoryAxis.line.color">
<a href="#configuration-navigator.categoryAxis.line.color">navigator.categoryAxis.line.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "black")</em>
</h3>

<p>The color of the lines. Accepts a valid CSS color string, including hex and rgb.</p>

<blockquote>
<p>Setting the <code>color</code> option affects the major and minor ticks, but not the grid lines.</p>
</blockquote>

<h3 id="configuration-navigator.categoryAxis.line.dashType">
<a href="#configuration-navigator.categoryAxis.line.dashType">navigator.categoryAxis.line.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "solid")</em>
</h3>

<p>The dash type of the line.</p>

<p>The following dash types are supported:</p>

<ul>
<li>"dash" - a line consisting of dashes</li>
<li>"dashDot" - a line consisting of a repeating pattern of dash-dot</li>
<li>"dot" - a line consisting of dots</li>
<li>"longDash" - a line consisting of a repeating pattern of long-dash</li>
<li>"longDashDot" - a line consisting of a repeating pattern of long-dash-dot</li>
<li>"longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot</li>
<li>"solid" - a solid line</li>
</ul>

<h3 id="configuration-navigator.categoryAxis.line.visible">
<a href="#configuration-navigator.categoryAxis.line.visible">navigator.categoryAxis.line.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: true)</em>
</h3>

<p>If set to <code>true</code> the chart will display the category axis lines. By default the category axis lines are visible.</p>

<h3 id="configuration-navigator.categoryAxis.line.width">
<a href="#configuration-navigator.categoryAxis.line.width">navigator.categoryAxis.line.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>The width of the line in pixels. Also affects the major and minor ticks, but not the grid lines.</p>

<h3 id="configuration-navigator.categoryAxis.majorGridLines">
<a href="#configuration-navigator.categoryAxis.majorGridLines">navigator.categoryAxis.majorGridLines </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The configuration of the major grid lines. These are the lines that are an extension of the major ticks through the
body of the chart.</p>

<h3 id="configuration-navigator.categoryAxis.majorGridLines.color">
<a href="#configuration-navigator.categoryAxis.majorGridLines.color">navigator.categoryAxis.majorGridLines.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "black")</em>
</h3>

<p>The color of the major grid lines. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-navigator.categoryAxis.majorGridLines.dashType">
<a href="#configuration-navigator.categoryAxis.majorGridLines.dashType">navigator.categoryAxis.majorGridLines.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "solid")</em>
</h3>

<p>The dash type of the major grid lines.</p>

<p>The following dash types are supported:</p>

<ul>
<li>"dash" - a line consisting of dashes</li>
<li>"dashDot" - a line consisting of a repeating pattern of dash-dot</li>
<li>"dot" - a line consisting of dots</li>
<li>"longDash" - a line consisting of a repeating pattern of long-dash</li>
<li>"longDashDot" - a line consisting of a repeating pattern of long-dash-dot</li>
<li>"longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot</li>
<li>"solid" - a solid line</li>
</ul>

<h3 id="configuration-navigator.categoryAxis.majorGridLines.visible">
<a href="#configuration-navigator.categoryAxis.majorGridLines.visible">navigator.categoryAxis.majorGridLines.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: false)</em>
</h3>

<p>If set to <code>true</code> the chart will display the major grid lines. By default the major grid lines are visible.</p>

<h3 id="configuration-navigator.categoryAxis.majorGridLines.width">
<a href="#configuration-navigator.categoryAxis.majorGridLines.width">navigator.categoryAxis.majorGridLines.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>The width of the category axis major grid lines in pixels.</p>

<h3 id="configuration-navigator.categoryAxis.majorGridLines.step">
<a href="#configuration-navigator.categoryAxis.majorGridLines.step">navigator.categoryAxis.majorGridLines.step </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>The step of the category axis major grid lines.</p>

<h3 id="configuration-navigator.categoryAxis.majorGridLines.skip">
<a href="#configuration-navigator.categoryAxis.majorGridLines.skip">navigator.categoryAxis.majorGridLines.skip </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The skip of the category axis major grid lines.</p>

<h3 id="configuration-navigator.categoryAxis.majorTicks">
<a href="#configuration-navigator.categoryAxis.majorTicks">navigator.categoryAxis.majorTicks </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The configuration of the category axis major ticks.</p>

<h3 id="configuration-navigator.categoryAxis.majorTicks.color">
<a href="#configuration-navigator.categoryAxis.majorTicks.color">navigator.categoryAxis.majorTicks.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "black")</em>
</h3>

<p>The color of the category axis major ticks lines. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-navigator.categoryAxis.majorTicks.size">
<a href="#configuration-navigator.categoryAxis.majorTicks.size">navigator.categoryAxis.majorTicks.size </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 4)</em>
</h3>

<p>The length of the tick line in pixels.</p>

<h3 id="configuration-navigator.categoryAxis.majorTicks.visible">
<a href="#configuration-navigator.categoryAxis.majorTicks.visible">navigator.categoryAxis.majorTicks.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: true)</em>
</h3>

<p>If set to <code>true</code> the chart will display the category axis major ticks. By default the category axis major ticks are visible.</p>

<h3 id="configuration-navigator.categoryAxis.majorTicks.width">
<a href="#configuration-navigator.categoryAxis.majorTicks.width">navigator.categoryAxis.majorTicks.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>The width of the major ticks in pixels.</p>

<h3 id="configuration-navigator.categoryAxis.majorTicks.step">
<a href="#configuration-navigator.categoryAxis.majorTicks.step">navigator.categoryAxis.majorTicks.step </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>The step of the category axis major ticks.</p>

<h3 id="configuration-navigator.categoryAxis.majorTicks.skip">
<a href="#configuration-navigator.categoryAxis.majorTicks.skip">navigator.categoryAxis.majorTicks.skip </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The skip of the category axis major ticks.</p>

<h3 id="configuration-navigator.categoryAxis.max">
<a href="#configuration-navigator.categoryAxis.max">navigator.categoryAxis.max </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The last date displayed on the category date axis. By default, the minimum date is the same as the last category.
This is often used in combination with the <a href="#configuration-categoryAxis.min">categoryAxis.min</a> and <a href="#configuration-categoryAxis.roundToBaseUnit">categoryAxis.roundToBaseUnit</a> options to
set up a fixed date range.</p>

<h3 id="configuration-navigator.categoryAxis.maxDateGroups">
<a href="#configuration-navigator.categoryAxis.maxDateGroups">navigator.categoryAxis.maxDateGroups </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 10)</em>
</h3>

<p>The maximum number of groups (categories) to display when
<a href="#configuration-categoryAxis.baseUnit">categoryAxis.baseUnit</a> is set to "fit" or
<a href="#configuration-categoryAxis.baseUnitStep">categoryAxis.baseUnitStep</a> is set to "auto".</p>

<h3 id="configuration-navigator.categoryAxis.min">
<a href="#configuration-navigator.categoryAxis.min">navigator.categoryAxis.min </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The first date displayed on the category date axis. By default, the minimum date is the same as the first category.
This is often used in combination with the <a href="#configuration-categoryAxis.min">categoryAxis.min</a> and <a href="#configuration-categoryAxis.roundToBaseUnit">categoryAxis.roundToBaseUnit</a> options to
set up a fixed date range.</p>

<h3 id="configuration-navigator.categoryAxis.minorGridLines">
<a href="#configuration-navigator.categoryAxis.minorGridLines">navigator.categoryAxis.minorGridLines </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The configuration of the minor grid lines. These are the lines that are an extension of the minor ticks through the
body of the chart.</p>

<h3 id="configuration-navigator.categoryAxis.minorGridLines.color">
<a href="#configuration-navigator.categoryAxis.minorGridLines.color">navigator.categoryAxis.minorGridLines.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "black")</em>
</h3>

<p>The color of the minor grid lines. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-navigator.categoryAxis.minorGridLines.dashType">
<a href="#configuration-navigator.categoryAxis.minorGridLines.dashType">navigator.categoryAxis.minorGridLines.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "solid")</em>
</h3>

<p>The dash type of the minor grid lines.</p>

<p>The following dash types are supported:</p>

<ul>
<li>"dash" - a line consisting of dashes</li>
<li>"dashDot" - a line consisting of a repeating pattern of dash-dot</li>
<li>"dot" - a line consisting of dots</li>
<li>"longDash" - a line consisting of a repeating pattern of long-dash</li>
<li>"longDashDot" - a line consisting of a repeating pattern of long-dash-dot</li>
<li>"longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot</li>
<li>"solid" - a solid line</li>
</ul>

<h3 id="configuration-navigator.categoryAxis.minorGridLines.visible">
<a href="#configuration-navigator.categoryAxis.minorGridLines.visible">navigator.categoryAxis.minorGridLines.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: false)</em>
</h3>

<p>If set to <code>true</code> the chart will display the minor grid lines. By default the minor grid lines are visible.</p>

<h3 id="configuration-navigator.categoryAxis.minorGridLines.width">
<a href="#configuration-navigator.categoryAxis.minorGridLines.width">navigator.categoryAxis.minorGridLines.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>The width of the category axis minor grid lines in pixels.</p>

<h3 id="configuration-navigator.categoryAxis.minorGridLines.step">
<a href="#configuration-navigator.categoryAxis.minorGridLines.step">navigator.categoryAxis.minorGridLines.step </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>The step of the category axis minor grid lines.</p>

<h3 id="configuration-navigator.categoryAxis.minorGridLines.skip">
<a href="#configuration-navigator.categoryAxis.minorGridLines.skip">navigator.categoryAxis.minorGridLines.skip </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The skip of the category axis minor grid lines.</p>

<h3 id="configuration-navigator.categoryAxis.minorTicks">
<a href="#configuration-navigator.categoryAxis.minorTicks">navigator.categoryAxis.minorTicks </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The configuration of the category axis minor ticks.</p>

<h3 id="configuration-navigator.categoryAxis.minorTicks.color">
<a href="#configuration-navigator.categoryAxis.minorTicks.color">navigator.categoryAxis.minorTicks.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "black")</em>
</h3>

<p>The color of the category axis minor ticks lines. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-navigator.categoryAxis.minorTicks.size">
<a href="#configuration-navigator.categoryAxis.minorTicks.size">navigator.categoryAxis.minorTicks.size </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 4)</em>
</h3>

<p>The length of the tick line in pixels.</p>

<h3 id="configuration-navigator.categoryAxis.minorTicks.visible">
<a href="#configuration-navigator.categoryAxis.minorTicks.visible">navigator.categoryAxis.minorTicks.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: true)</em>
</h3>

<p>If set to <code>true</code> the chart will display the category axis minor ticks. By default the category axis minor ticks are visible.</p>

<h3 id="configuration-navigator.categoryAxis.minorTicks.width">
<a href="#configuration-navigator.categoryAxis.minorTicks.width">navigator.categoryAxis.minorTicks.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>The width of the minor ticks in pixels.</p>

<h3 id="configuration-navigator.categoryAxis.minorTicks.step">
<a href="#configuration-navigator.categoryAxis.minorTicks.step">navigator.categoryAxis.minorTicks.step </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>The step of the category axis minor ticks.</p>

<h3 id="configuration-navigator.categoryAxis.minorTicks.skip">
<a href="#configuration-navigator.categoryAxis.minorTicks.skip">navigator.categoryAxis.minorTicks.skip </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The skip of the category axis minor ticks.</p>

<h3 id="configuration-navigator.categoryAxis.plotBands">
<a href="#configuration-navigator.categoryAxis.plotBands">navigator.categoryAxis.plotBands </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>The plot bands of the category axis.</p>

<h3 id="configuration-navigator.categoryAxis.plotBands.color">
<a href="#configuration-navigator.categoryAxis.plotBands.color">navigator.categoryAxis.plotBands.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The color of the plot band.</p>

<h3 id="configuration-navigator.categoryAxis.plotBands.from">
<a href="#configuration-navigator.categoryAxis.plotBands.from">navigator.categoryAxis.plotBands.from </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The start position of the plot band in axis units.</p>

<h3 id="configuration-navigator.categoryAxis.plotBands.opacity">
<a href="#configuration-navigator.categoryAxis.plotBands.opacity">navigator.categoryAxis.plotBands.opacity </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The opacity of the plot band.</p>

<h3 id="configuration-navigator.categoryAxis.plotBands.to">
<a href="#configuration-navigator.categoryAxis.plotBands.to">navigator.categoryAxis.plotBands.to </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The end position of the plot band in axis units.</p>

<h3 id="configuration-navigator.categoryAxis.reverse">
<a href="#configuration-navigator.categoryAxis.reverse">navigator.categoryAxis.reverse </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: false)</em>
</h3>

<p>If set to <code>true</code> the category axis direction will be reversed. By default categories are listed from left to right and from bottom to top.</p>

<h3 id="configuration-navigator.categoryAxis.roundToBaseUnit">
<a href="#configuration-navigator.categoryAxis.roundToBaseUnit">navigator.categoryAxis.roundToBaseUnit </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: true)</em>
</h3>

<p>If set to <code>true</code> the chart will round the first and last date to the nearest base unit.</p>

<p>The <code>roundToBaseUnit</code> option will be ignored if <a href="#configuration-series.type">series.type</a> is set to "bar", "column", "ohlc" or "candlestick".</p>

<h3 id="configuration-navigator.categoryAxis.title">
<a href="#configuration-navigator.categoryAxis.title">navigator.categoryAxis.title </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The title configuration of the category axis.</p>

<blockquote>
<p>The <a href="#configuration-categoryAxis.title.text">categoryAxis.title.text</a> option must be set in order to display the title.</p>
</blockquote>

<h3 id="configuration-navigator.categoryAxis.title.background">
<a href="#configuration-navigator.categoryAxis.title.background">navigator.categoryAxis.title.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the title. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-navigator.categoryAxis.title.border">
<a href="#configuration-navigator.categoryAxis.title.border">navigator.categoryAxis.title.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the title.</p>

<h3 id="configuration-navigator.categoryAxis.title.border.color">
<a href="#configuration-navigator.categoryAxis.title.border.color">navigator.categoryAxis.title.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "black")</em>
</h3>

<p>The color of the border. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-navigator.categoryAxis.title.border.dashType">
<a href="#configuration-navigator.categoryAxis.title.border.dashType">navigator.categoryAxis.title.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<p>The following dash types are supported:</p>

<ul>
<li>"dash" - a line consisting of dashes</li>
<li>"dashDot" - a line consisting of a repeating pattern of dash-dot</li>
<li>"dot" - a line consisting of dots</li>
<li>"longDash" - a line consisting of a repeating pattern of long-dash</li>
<li>"longDashDot" - a line consisting of a repeating pattern of long-dash-dot</li>
<li>"longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot</li>
<li>"solid" - a solid line</li>
</ul>

<h3 id="configuration-navigator.categoryAxis.title.border.width">
<a href="#configuration-navigator.categoryAxis.title.border.width">navigator.categoryAxis.title.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.</p>

<h3 id="configuration-navigator.categoryAxis.title.color">
<a href="#configuration-navigator.categoryAxis.title.color">navigator.categoryAxis.title.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the title. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-navigator.categoryAxis.title.font">
<a href="#configuration-navigator.categoryAxis.title.font">navigator.categoryAxis.title.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "16px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The font style of the title.</p>

<h3 id="configuration-navigator.categoryAxis.title.margin">
<a href="#configuration-navigator.categoryAxis.title.margin">navigator.categoryAxis.title.margin </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> <em>(default: 5)</em>
</h3>

<p>The margin of the title. A numeric value will set all margins.</p>

<h3 id="configuration-navigator.categoryAxis.title.margin.bottom">
<a href="#configuration-navigator.categoryAxis.title.margin.bottom">navigator.categoryAxis.title.margin.bottom </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The bottom margin of the title.</p>

<h3 id="configuration-navigator.categoryAxis.title.margin.left">
<a href="#configuration-navigator.categoryAxis.title.margin.left">navigator.categoryAxis.title.margin.left </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The left margin of the title.</p>

<h3 id="configuration-navigator.categoryAxis.title.margin.right">
<a href="#configuration-navigator.categoryAxis.title.margin.right">navigator.categoryAxis.title.margin.right </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The right margin of the title.</p>

<h3 id="configuration-navigator.categoryAxis.title.margin.top">
<a href="#configuration-navigator.categoryAxis.title.margin.top">navigator.categoryAxis.title.margin.top </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The top margin of the title.</p>

<h3 id="configuration-navigator.categoryAxis.title.padding">
<a href="#configuration-navigator.categoryAxis.title.padding">navigator.categoryAxis.title.padding </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> <em>(default: 0)</em>
</h3>

<p>The padding of the title. A numeric value will set all paddings.</p>

<h3 id="configuration-navigator.categoryAxis.title.padding.bottom">
<a href="#configuration-navigator.categoryAxis.title.padding.bottom">navigator.categoryAxis.title.padding.bottom </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The bottom padding of the title.</p>

<h3 id="configuration-navigator.categoryAxis.title.padding.left">
<a href="#configuration-navigator.categoryAxis.title.padding.left">navigator.categoryAxis.title.padding.left </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The left padding of the title.</p>

<h3 id="configuration-navigator.categoryAxis.title.padding.right">
<a href="#configuration-navigator.categoryAxis.title.padding.right">navigator.categoryAxis.title.padding.right </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The right padding of the title.</p>

<h3 id="configuration-navigator.categoryAxis.title.padding.top">
<a href="#configuration-navigator.categoryAxis.title.padding.top">navigator.categoryAxis.title.padding.top </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The top padding of the title.</p>

<h3 id="configuration-navigator.categoryAxis.title.position">
<a href="#configuration-navigator.categoryAxis.title.position">navigator.categoryAxis.title.position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "center")</em>
</h3>

<p>The position of the title.</p>

<p>The supported values are:</p>

<ul>
<li>"top" - the axis title is positioned on the top (applicable to vertical axis)</li>
<li>"bottom" - the axis title is positioned on the bottom (applicable to vertical axis)</li>
<li>"left" - the axis title is positioned on the left (applicable to horizontal axis)</li>
<li>"right" - the axis title is positioned on the right (applicable to horizontal axis)</li>
<li>"center" - the axis title is positioned in the center</li>
</ul>

<h3 id="configuration-navigator.categoryAxis.title.rotation">
<a href="#configuration-navigator.categoryAxis.title.rotation">navigator.categoryAxis.title.rotation </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The rotation angle of the title. By default the title is not rotated.</p>

<h3 id="configuration-navigator.categoryAxis.title.text">
<a href="#configuration-navigator.categoryAxis.title.text">navigator.categoryAxis.title.text </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text of the title.</p>

<h3 id="configuration-navigator.categoryAxis.title.visible">
<a href="#configuration-navigator.categoryAxis.title.visible">navigator.categoryAxis.title.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: true)</em>
</h3>

<p>If set to <code>true</code> the chart will display the category axis title. By default the category axis title is visible.</p>

<h3 id="configuration-navigator.categoryAxis.visible">
<a href="#configuration-navigator.categoryAxis.visible">navigator.categoryAxis.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: true)</em>
</h3>

<p>If set to <code>true</code> the chart will display the category axis. By default the category axis is visible.</p>

<h3 id="configuration-navigator.categoryAxis.weekStartDay">
<a href="#configuration-navigator.categoryAxis.weekStartDay">navigator.categoryAxis.weekStartDay </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: kendo.days.Sunday)</em>
</h3>

<p>The week start day when <a href="#configuration-categoryAxis.baseUnit">categoryAxis.baseUnit</a> is set to "weeks".</p>

<p>The supported values are:</p>

<ul>
<li>kendo.days.Sunday - equal to 0</li>
<li>kendo.days.Monday - equal to 1</li>
<li>kendo.days.Tuesday - equal to 2</li>
<li>kendo.days.Wednesday - equal to 3</li>
<li>kendo.days.Thursday - equal to 4</li>
<li>kendo.days.Friday - equal to 5</li>
<li>kendo.days.Saturday - equal to 6</li>
</ul>

<h3 id="configuration-navigator.categoryAxis.notes">
<a href="#configuration-navigator.categoryAxis.notes">navigator.categoryAxis.notes </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The category axis notes configuration.</p>

<h3 id="configuration-navigator.categoryAxis.notes.icon">
<a href="#configuration-navigator.categoryAxis.notes.icon">navigator.categoryAxis.notes.icon </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The icon of the notes.</p>

<h3 id="configuration-navigator.categoryAxis.notes.position">
<a href="#configuration-navigator.categoryAxis.notes.position">navigator.categoryAxis.notes.position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The position of the category axis note.</p>

<ul>
<li>"top" - The note is positioned on the top.</li>
<li>"bottom" - The note is positioned on the bottom.</li>
<li>"left" - The note is positioned on the left.</li>
<li>"right" - The note is positioned on the right.</li>
</ul>

<h3 id="configuration-navigator.categoryAxis.notes.icon.background">
<a href="#configuration-navigator.categoryAxis.notes.icon.background">navigator.categoryAxis.notes.icon.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the notes icon.</p>

<h3 id="configuration-navigator.categoryAxis.notes.icon.border">
<a href="#configuration-navigator.categoryAxis.notes.icon.border">navigator.categoryAxis.notes.icon.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the icon.</p>

<h3 id="configuration-navigator.categoryAxis.notes.icon.border.color">
<a href="#configuration-navigator.categoryAxis.notes.icon.border.color">navigator.categoryAxis.notes.icon.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The border color of the icon.</p>

<h3 id="configuration-navigator.categoryAxis.notes.icon.border.width">
<a href="#configuration-navigator.categoryAxis.notes.icon.border.width">navigator.categoryAxis.notes.icon.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The border width of the icon.</p>

<h3 id="configuration-navigator.categoryAxis.notes.icon.size">
<a href="#configuration-navigator.categoryAxis.notes.icon.size">navigator.categoryAxis.notes.icon.size </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The size of the icon.</p>

<h3 id="configuration-navigator.categoryAxis.notes.icon.type">
<a href="#configuration-navigator.categoryAxis.notes.icon.type">navigator.categoryAxis.notes.icon.type </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "circle")</em>
</h3>

<p>The icon shape.</p>

<p>The supported values are:</p>

<ul>
<li>"circle" - the marker shape is circle.</li>
<li>"square" - the marker shape is square.</li>
<li>"triangle" - the marker shape is triangle.</li>
<li>"cross" - the marker shape is cross.</li>
</ul>

<h3 id="configuration-navigator.categoryAxis.notes.icon.visible">
<a href="#configuration-navigator.categoryAxis.notes.icon.visible">navigator.categoryAxis.notes.icon.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: "true")</em>
</h3>

<p>The icon visibility.</p>

<h3 id="configuration-navigator.categoryAxis.notes.label">
<a href="#configuration-navigator.categoryAxis.notes.label">navigator.categoryAxis.notes.label </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The label of the notes.</p>

<h3 id="configuration-navigator.categoryAxis.notes.label.background">
<a href="#configuration-navigator.categoryAxis.notes.label.background">navigator.categoryAxis.notes.label.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the label. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-navigator.categoryAxis.notes.label.border">
<a href="#configuration-navigator.categoryAxis.notes.label.border">navigator.categoryAxis.notes.label.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the label.</p>

<h3 id="configuration-navigator.categoryAxis.notes.label.border.color">
<a href="#configuration-navigator.categoryAxis.notes.label.border.color">navigator.categoryAxis.notes.label.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "black")</em>
</h3>

<p>The color of the border. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-navigator.categoryAxis.notes.label.border.dashType">
<a href="#configuration-navigator.categoryAxis.notes.label.border.dashType">navigator.categoryAxis.notes.label.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<p>The following dash types are supported:</p>

<ul>
<li>"dash" - a line consisting of dashes</li>
<li>"dashDot" - a line consisting of a repeating pattern of dash-dot</li>
<li>"dot" - a line consisting of dots</li>
<li>"longDash" - a line consisting of a repeating pattern of long-dash</li>
<li>"longDashDot" - a line consisting of a repeating pattern of long-dash-dot</li>
<li>"longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot</li>
<li>"solid" - a solid line</li>
</ul>

<h3 id="configuration-navigator.categoryAxis.notes.label.border.width">
<a href="#configuration-navigator.categoryAxis.notes.label.border.width">navigator.categoryAxis.notes.label.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.</p>

<h3 id="configuration-navigator.categoryAxis.notes.label.color">
<a href="#configuration-navigator.categoryAxis.notes.label.color">navigator.categoryAxis.notes.label.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the label. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-navigator.categoryAxis.notes.label.font">
<a href="#configuration-navigator.categoryAxis.notes.label.font">navigator.categoryAxis.notes.label.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "12px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The font style of the label.</p>

<h3 id="configuration-navigator.categoryAxis.notes.label.template">
<a href="#configuration-navigator.categoryAxis.notes.label.template">navigator.categoryAxis.notes.label.template </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The <a href="/api/framework/kendo#methods-template">template</a> which renders the labels.</p>

<p>The fields which can be used in the template are:</p>

<ul>
<li>value - the category value</li>
</ul>

<h3 id="configuration-navigator.categoryAxis.notes.label.visible">
<a href="#configuration-navigator.categoryAxis.notes.label.visible">navigator.categoryAxis.notes.label.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: true)</em>
</h3>

<p>If set to <code>true</code> the chart will display the category notes label. By default the category notes label are visible.</p>

<h3 id="configuration-navigator.categoryAxis.notes.label.rotation">
<a href="#configuration-navigator.categoryAxis.notes.label.rotation">navigator.categoryAxis.notes.label.rotation </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The rotation angle of the label. By default the label are not rotated.</p>

<h3 id="configuration-navigator.categoryAxis.notes.label.format">
<a href="#configuration-navigator.categoryAxis.notes.label.format">navigator.categoryAxis.notes.label.format </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "{0}")</em>
</h3>

<p>The format used to display the notes label. Uses <a href="/api/framework/kendo#methods-format">kendo.format</a>. Contains one placeholder ("{0}") which represents the category value.</p>

<h3 id="configuration-navigator.categoryAxis.notes.label.position">
<a href="#configuration-navigator.categoryAxis.notes.label.position">navigator.categoryAxis.notes.label.position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "inside")</em>
</h3>

<p>The position of the labels.</p>

<ul>
<li>"inside" - the label is positioned inside of the icon.</li>
<li>"outside" - the label is positioned outside of the icon.</li>
</ul>

<h3 id="configuration-navigator.categoryAxis.notes.line">
<a href="#configuration-navigator.categoryAxis.notes.line">navigator.categoryAxis.notes.line </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The line of the notes.</p>

<h3 id="configuration-navigator.categoryAxis.notes.line.width">
<a href="#configuration-navigator.categoryAxis.notes.line.width">navigator.categoryAxis.notes.line.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The line width of the notes.</p>

<h3 id="configuration-navigator.categoryAxis.notes.line.color">
<a href="#configuration-navigator.categoryAxis.notes.line.color">navigator.categoryAxis.notes.line.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The line color of the notes.</p>

<h3 id="configuration-navigator.categoryAxis.notes.line.length">
<a href="#configuration-navigator.categoryAxis.notes.line.length">navigator.categoryAxis.notes.line.length </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The length of the connecting lines in pixels.</p>

<h3 id="configuration-navigator.categoryAxis.notes.data">
<a href="#configuration-navigator.categoryAxis.notes.data">navigator.categoryAxis.notes.data </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>The items of the notes.</p>

<h3 id="configuration-navigator.categoryAxis.notes.data.value">
<a href="#configuration-navigator.categoryAxis.notes.data.value">navigator.categoryAxis.notes.data.value </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The value of the note.</p>

<h3 id="configuration-navigator.categoryAxis.notes.data.position">
<a href="#configuration-navigator.categoryAxis.notes.data.position">navigator.categoryAxis.notes.data.position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "inside")</em>
</h3>

<p>The position of the category axis note.</p>

<ul>
<li>"top" - The note is positioned on the top.</li>
<li>"bottom" - The note is positioned on the bottom.</li>
<li>"left" - The note is positioned on the left.</li>
<li>"right" - The note is positioned on the right.</li>
</ul>

<h3 id="configuration-navigator.categoryAxis.notes.data.icon">
<a href="#configuration-navigator.categoryAxis.notes.data.icon">navigator.categoryAxis.notes.data.icon </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The icon of the note.</p>

<h3 id="configuration-navigator.categoryAxis.notes.data.icon.background">
<a href="#configuration-navigator.categoryAxis.notes.data.icon.background">navigator.categoryAxis.notes.data.icon.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the note icon.</p>

<h3 id="configuration-navigator.categoryAxis.notes.data.icon.border">
<a href="#configuration-navigator.categoryAxis.notes.data.icon.border">navigator.categoryAxis.notes.data.icon.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the icon.</p>

<h3 id="configuration-navigator.categoryAxis.notes.data.icon.border.color">
<a href="#configuration-navigator.categoryAxis.notes.data.icon.border.color">navigator.categoryAxis.notes.data.icon.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The border color of the icon.</p>

<h3 id="configuration-navigator.categoryAxis.notes.data.icon.border.width">
<a href="#configuration-navigator.categoryAxis.notes.data.icon.border.width">navigator.categoryAxis.notes.data.icon.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The border width of the icon.</p>

<h3 id="configuration-navigator.categoryAxis.notes.data.icon.size">
<a href="#configuration-navigator.categoryAxis.notes.data.icon.size">navigator.categoryAxis.notes.data.icon.size </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The size of the icon.</p>

<h3 id="configuration-navigator.categoryAxis.notes.data.icon.type">
<a href="#configuration-navigator.categoryAxis.notes.data.icon.type">navigator.categoryAxis.notes.data.icon.type </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "circle")</em>
</h3>

<p>The icon shape.</p>

<p>The supported values are:</p>

<ul>
<li>"circle" - the marker shape is circle.</li>
<li>"square" - the marker shape is square.</li>
<li>"triangle" - the marker shape is triangle.</li>
<li>"cross" - the marker shape is cross.</li>
</ul>

<h3 id="configuration-navigator.categoryAxis.notes.data.icon.visible">
<a href="#configuration-navigator.categoryAxis.notes.data.icon.visible">navigator.categoryAxis.notes.data.icon.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: "true")</em>
</h3>

<p>The icon visibility.</p>

<h3 id="configuration-navigator.categoryAxis.notes.data.label">
<a href="#configuration-navigator.categoryAxis.notes.data.label">navigator.categoryAxis.notes.data.label </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The label of the note.</p>

<h3 id="configuration-navigator.categoryAxis.notes.data.label.background">
<a href="#configuration-navigator.categoryAxis.notes.data.label.background">navigator.categoryAxis.notes.data.label.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the label. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-navigator.categoryAxis.notes.data.label.border">
<a href="#configuration-navigator.categoryAxis.notes.data.label.border">navigator.categoryAxis.notes.data.label.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the label.</p>

<h3 id="configuration-navigator.categoryAxis.notes.data.label.border.color">
<a href="#configuration-navigator.categoryAxis.notes.data.label.border.color">navigator.categoryAxis.notes.data.label.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "black")</em>
</h3>

<p>The color of the border. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-navigator.categoryAxis.notes.data.label.border.dashType">
<a href="#configuration-navigator.categoryAxis.notes.data.label.border.dashType">navigator.categoryAxis.notes.data.label.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<p>The following dash types are supported:</p>

<ul>
<li>"dash" - a line consisting of dashes</li>
<li>"dashDot" - a line consisting of a repeating pattern of dash-dot</li>
<li>"dot" - a line consisting of dots</li>
<li>"longDash" - a line consisting of a repeating pattern of long-dash</li>
<li>"longDashDot" - a line consisting of a repeating pattern of long-dash-dot</li>
<li>"longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot</li>
<li>"solid" - a solid line</li>
</ul>

<h3 id="configuration-navigator.categoryAxis.notes.data.label.border.width">
<a href="#configuration-navigator.categoryAxis.notes.data.label.border.width">navigator.categoryAxis.notes.data.label.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.</p>

<h3 id="configuration-navigator.categoryAxis.notes.data.label.color">
<a href="#configuration-navigator.categoryAxis.notes.data.label.color">navigator.categoryAxis.notes.data.label.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the note label. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-navigator.categoryAxis.notes.data.label.font">
<a href="#configuration-navigator.categoryAxis.notes.data.label.font">navigator.categoryAxis.notes.data.label.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "12px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The font style of the note label.</p>

<h3 id="configuration-navigator.categoryAxis.notes.data.label.template">
<a href="#configuration-navigator.categoryAxis.notes.data.label.template">navigator.categoryAxis.notes.data.label.template </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The <a href="/api/framework/kendo#methods-template">template</a> which renders the labels.</p>

<p>The fields which can be used in the template are:</p>

<ul>
<li>value - the category value</li>
</ul>

<h3 id="configuration-navigator.categoryAxis.notes.data.label.visible">
<a href="#configuration-navigator.categoryAxis.notes.data.label.visible">navigator.categoryAxis.notes.data.label.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: true)</em>
</h3>

<p>If set to <code>true</code> the chart will display the category notes label. By default the category notes label are visible.</p>

<h3 id="configuration-navigator.categoryAxis.notes.data.label.rotation">
<a href="#configuration-navigator.categoryAxis.notes.data.label.rotation">navigator.categoryAxis.notes.data.label.rotation </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The rotation angle of the label. By default the label are not rotated.</p>

<h3 id="configuration-navigator.categoryAxis.notes.data.label.format">
<a href="#configuration-navigator.categoryAxis.notes.data.label.format">navigator.categoryAxis.notes.data.label.format </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "{0}")</em>
</h3>

<p>The format used to display the note label. Uses <a href="/api/framework/kendo#methods-format">kendo.format</a>. Contains one placeholder ("{0}") which represents the category value.</p>

<h3 id="configuration-navigator.categoryAxis.notes.data.label.text">
<a href="#configuration-navigator.categoryAxis.notes.data.label.text">navigator.categoryAxis.notes.data.label.text </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The label note text.</p>

<h3 id="configuration-navigator.categoryAxis.notes.data.label.position">
<a href="#configuration-navigator.categoryAxis.notes.data.label.position">navigator.categoryAxis.notes.data.label.position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "inside")</em>
</h3>

<p>The position of the category axis note label.</p>

<ul>
<li>"inside" - the label is positioned inside of the icon.</li>
<li>"outside" - the label is positioned outside of the icon.</li>
</ul>

<h3 id="configuration-navigator.categoryAxis.notes.data.line">
<a href="#configuration-navigator.categoryAxis.notes.data.line">navigator.categoryAxis.notes.data.line </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The line of the note.</p>

<h3 id="configuration-navigator.categoryAxis.notes.data.line.width">
<a href="#configuration-navigator.categoryAxis.notes.data.line.width">navigator.categoryAxis.notes.data.line.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The line width of the note.</p>

<h3 id="configuration-navigator.categoryAxis.notes.data.line.color">
<a href="#configuration-navigator.categoryAxis.notes.data.line.color">navigator.categoryAxis.notes.data.line.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The line color of the note.</p>

<h3 id="configuration-navigator.categoryAxis.notes.data.line.length">
<a href="#configuration-navigator.categoryAxis.notes.data.line.length">navigator.categoryAxis.notes.data.line.length </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The length of the connecting lines in pixels.</p>

<h3 id="configuration-navigator.dataSource">
<a href="#configuration-navigator.dataSource">navigator.dataSource </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Navigator DataSource configuration or instance.</p>

<p>When the navigator is bound via its own data source,
it will automatically set "from" and "to" filters on the main data source.</p>

<p>This, in conjunction with server filtering, allows you to visualize large data sets
without loading them at once.</p>

<h4>Example</h4>

<pre><code>&lt;div id="stock-chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#stock-chart").kendoStockChart({
    dataSource: {
        transport: {
             read: "/stock/detail"
        },
        serverFiltering: true
    },
    navigator: {
        dataSource: {
            transport: {
                read: "/stock/volume"
            }
        }
    }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-navigator.autoBind">
<a href="#configuration-navigator.autoBind">navigator.autoBind </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: true)</em>
</h3>

<p>Indicates whether the navigator will call read on the data source initially.
Applicable only when using a dedicated navigator data source.</p>

<h4>Example</h4>

<pre><code>&lt;div id="stock-chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#stock-chart").kendoStockChart({
    navigator: {
        dataSource: naviDataSource,
        autoBind: false
    }
});

// ...
naviDataSource.read();
&lt;/script&gt;
</code></pre>

<h3 id="configuration-navigator.dateField">
<a href="#configuration-navigator.dateField">navigator.dateField </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The field containing the point date.
It is used as a default <code>field</code> for the navigator axis.</p>

<p>The data item field value must be either:</p>

<h4>* Date instance</h4>

<h4>* String parsable by <code>new Date([field value])</code>
</h4>

<h4>* String in ASP.NET JSON format, i.e. "\/Date(1320825600000-0800)\/"</h4>

<h3 id="configuration-navigator.pane">
<a href="#configuration-navigator.pane">navigator.pane </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The navigator pane configuration.</p>

<h3 id="configuration-navigator.pane.background">
<a href="#configuration-navigator.pane.background">navigator.pane.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the pane. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-navigator.pane.border">
<a href="#configuration-navigator.pane.border">navigator.pane.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the navigator pane.</p>

<h3 id="configuration-navigator.pane.border.color">
<a href="#configuration-navigator.pane.border.color">navigator.pane.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "black")</em>
</h3>

<p>The color of the border. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-navigator.pane.border.dashType">
<a href="#configuration-navigator.pane.border.dashType">navigator.pane.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<p>The following dash types are supported:</p>

<ul>
<li>"dash" - a line consisting of dashes</li>
<li>"dashDot" - a line consisting of a repeating pattern of dash-dot</li>
<li>"dot" - a line consisting of dots</li>
<li>"longDash" - a line consisting of a repeating pattern of long-dash</li>
<li>"longDashDot" - a line consisting of a repeating pattern of long-dash-dot</li>
<li>"longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot</li>
<li>"solid" - a solid line</li>
</ul>

<h3 id="configuration-navigator.pane.border.width">
<a href="#configuration-navigator.pane.border.width">navigator.pane.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.</p>

<h3 id="configuration-navigator.pane.height">
<a href="#configuration-navigator.pane.height">navigator.pane.height </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The navigator pane height in pixels.</p>

<h3 id="configuration-navigator.pane.margin">
<a href="#configuration-navigator.pane.margin">navigator.pane.margin </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> <em>(default: 0)</em>
</h3>

<p>The margin of the pane. A numeric value will set all margins.</p>

<h3 id="configuration-navigator.pane.margin.bottom">
<a href="#configuration-navigator.pane.margin.bottom">navigator.pane.margin.bottom </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The bottom margin of the navigator pane.</p>

<h3 id="configuration-navigator.pane.margin.left">
<a href="#configuration-navigator.pane.margin.left">navigator.pane.margin.left </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The left margin of the navigator pane.</p>

<h3 id="configuration-navigator.pane.margin.right">
<a href="#configuration-navigator.pane.margin.right">navigator.pane.margin.right </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The right margin of the navigator pane.</p>

<h3 id="configuration-navigator.pane.margin.top">
<a href="#configuration-navigator.pane.margin.top">navigator.pane.margin.top </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The top margin of the navigator pane.</p>

<h3 id="configuration-navigator.pane.name">
<a href="#configuration-navigator.pane.name">navigator.pane.name </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The unique name of the navigator pane.</p>

<h3 id="configuration-navigator.pane.padding">
<a href="#configuration-navigator.pane.padding">navigator.pane.padding </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> <em>(default: 0)</em>
</h3>

<p>The padding of the pane. A numeric value will set all paddings.</p>

<h3 id="configuration-navigator.pane.padding.bottom">
<a href="#configuration-navigator.pane.padding.bottom">navigator.pane.padding.bottom </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The bottom padding of the navigator pane.</p>

<h3 id="configuration-navigator.pane.padding.left">
<a href="#configuration-navigator.pane.padding.left">navigator.pane.padding.left </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The left padding of the navigator pane.</p>

<h3 id="configuration-navigator.pane.padding.right">
<a href="#configuration-navigator.pane.padding.right">navigator.pane.padding.right </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The right padding of the navigator pane.</p>

<h3 id="configuration-navigator.pane.padding.top">
<a href="#configuration-navigator.pane.padding.top">navigator.pane.padding.top </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The top padding of the navigator pane.</p>

<h3 id="configuration-navigator.pane.title">
<a href="#configuration-navigator.pane.title">navigator.pane.title </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The title configuration of the navigator pane.</p>

<blockquote>
<p>The <a href="#configuration-panes.title.text">panes.title.text</a> option must be set in order to display the title.</p>
</blockquote>

<h3 id="configuration-navigator.pane.title.background">
<a href="#configuration-navigator.pane.title.background">navigator.pane.title.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the title. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-navigator.pane.title.border">
<a href="#configuration-navigator.pane.title.border">navigator.pane.title.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the title.</p>

<h3 id="configuration-navigator.pane.title.border.color">
<a href="#configuration-navigator.pane.title.border.color">navigator.pane.title.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "black")</em>
</h3>

<p>The color of the border. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-navigator.pane.title.border.dashType">
<a href="#configuration-navigator.pane.title.border.dashType">navigator.pane.title.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<p>The following dash types are supported:</p>

<ul>
<li>"dash" - a line consisting of dashes</li>
<li>"dashDot" - a line consisting of a repeating pattern of dash-dot</li>
<li>"dot" - a line consisting of dots</li>
<li>"longDash" - a line consisting of a repeating pattern of long-dash</li>
<li>"longDashDot" - a line consisting of a repeating pattern of long-dash-dot</li>
<li>"longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot</li>
<li>"solid" - a solid line</li>
</ul>

<h3 id="configuration-navigator.pane.title.border.width">
<a href="#configuration-navigator.pane.title.border.width">navigator.pane.title.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.</p>

<h3 id="configuration-navigator.pane.title.color">
<a href="#configuration-navigator.pane.title.color">navigator.pane.title.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the title. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-navigator.pane.title.font">
<a href="#configuration-navigator.pane.title.font">navigator.pane.title.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "16px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The font style of the title.</p>

<h3 id="configuration-navigator.pane.title.margin">
<a href="#configuration-navigator.pane.title.margin">navigator.pane.title.margin </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> <em>(default: 5)</em>
</h3>

<p>The margin of the title. A numeric value will set all margins.</p>

<h3 id="configuration-navigator.pane.title.margin.bottom">
<a href="#configuration-navigator.pane.title.margin.bottom">navigator.pane.title.margin.bottom </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The bottom margin of the title.</p>

<h3 id="configuration-navigator.pane.title.margin.left">
<a href="#configuration-navigator.pane.title.margin.left">navigator.pane.title.margin.left </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The left margin of the title.</p>

<h3 id="configuration-navigator.pane.title.margin.right">
<a href="#configuration-navigator.pane.title.margin.right">navigator.pane.title.margin.right </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The right margin of the title.</p>

<h3 id="configuration-navigator.pane.title.margin.top">
<a href="#configuration-navigator.pane.title.margin.top">navigator.pane.title.margin.top </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The top margin of the title.</p>

<h3 id="configuration-navigator.pane.title.position">
<a href="#configuration-navigator.pane.title.position">navigator.pane.title.position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "center")</em>
</h3>

<p>The position of the title.</p>

<p>The supported values are:</p>

<ul>
<li>"left" - the axis title is positioned on the left (applicable to horizontal axis)</li>
<li>"right" - the axis title is positioned on the right (applicable to horizontal axis)</li>
<li>"center" - the axis title is positioned in the center</li>
</ul>

<h3 id="configuration-navigator.pane.title.text">
<a href="#configuration-navigator.pane.title.text">navigator.pane.title.text </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text of the title.</p>

<h3 id="configuration-navigator.pane.title.visible">
<a href="#configuration-navigator.pane.title.visible">navigator.pane.title.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: true)</em>
</h3>

<p>If set to <code>true</code> the chart will display the pane title. By default the pane title is visible.</p>

<h3 id="configuration-navigator.series">
<a href="#configuration-navigator.series">navigator.series </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>Array of series definitions.</p>

<p>Accepts the same options as the root <code>series</code> collection.</p>

<p>Omitting the array and specifying a single series is also acceptable.</p>

<h4>Example</h4>

<pre><code>&lt;div id="stock-chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#stock-chart").kendoStockChart({
     navigator: {
        series: {
            type: "line",
            field: "volume"
        }
     },
     ...
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-navigator.visible">
<a href="#configuration-navigator.visible">navigator.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: true)</em>
</h3>

<p>The visibility of the navigator.</p>

<h3 id="configuration-navigator.series.type">
<a href="#configuration-navigator.series.type">navigator.series.type </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The type of the series. Available types:</p>

<ul>
<li>candlestick, ohlc</li>
<li>column</li>
<li>bullet</li>
<li>area</li>
<li>line</li>
</ul>

<h3 id="configuration-navigator.series.dashType">
<a href="#configuration-navigator.series.dashType">navigator.series.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of line chart.</p>

<blockquote>
<p>The <code>dashType</code> option is taken into consideration only if the <a href="#configuration-series.type">series.type</a> option is set to "line".</p>
</blockquote>

<p>The following dash types are supported:</p>

<ul>
<li>"dash" - a line consisting of dashes</li>
<li>"dashDot" - a line consisting of a repeating pattern of dash-dot</li>
<li>"dot" - a line consisting of dots</li>
<li>"longDash" - a line consisting of a repeating pattern of long-dash</li>
<li>"longDashDot" - a line consisting of a repeating pattern of long-dash-dot</li>
<li>"longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot</li>
<li>"solid" - a solid line</li>
</ul>

<h4>Example - set the chart legend border dash type</h4>

<p></p><div id="stock-chart"></div>
  <script>
  $(&quot;#stock-chart&quot;).kendoStockChart({
    series: [
      {
        dashType: &quot;dashDot&quot;,
        type: &quot;line&quot;,
        data: [1, 2, 3]
      }
    ],
    categoryAxis: {
      baseUnit: &quot;days&quot;,
      categories: [
        new Date(2012, 1, 1),
        new Date(2012, 1, 2),
        new Date(2012, 1, 3)
      ]
    }
  });
  </script>

<h3 id="configuration-navigator.series.data">
<a href="#configuration-navigator.series.data">navigator.series.data </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>Array of data items. The data item type can be either a:</p>

<ul>
<li>Array of objects. Each point is bound to the specified series fields.</li>
<li>Array of numbers. Available for area, column and line series.</li>
<li>Array of arrays of numbers. Available for:

<ul>
<li>OHLC and candlestick series (open, high, low, close)</li>
</ul>
</li>
</ul>

<h4>Example - set the chart series data as array of objects</h4>

<p></p><div id="stock-chart"></div>
  <script>
  $(&quot;#stock-chart&quot;).kendoStockChart({
    series: [
      {
        type: &quot;candlestick&quot;,
        data: [{
          open: 2,
          high: 4,
          low: 1,
          close: 3
        }]
      }
    ],
    categoryAxis: {
      categories: [
        new Date(2012, 1, 1)
      ]
    }
  });
  </script>

<h4>Example - set the chart series data as array of arrays</h4>

<pre><code>&lt;div id="stock-chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#stock-chart").kendoStockChart({
series: [
  {
    type: "candlestick",
    data: [2, 4, 1, 3]
  }
],
categoryAxis: {
  categories: [
    new Date(2012, 1, 1)
  ]
}
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-navigator.series.highField">
<a href="#configuration-navigator.series.highField">navigator.series.highField </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The data field containing the high value.</p>

<p>** Available for candlestick and ohlc series only **</p>

<h3 id="configuration-navigator.series.field">
<a href="#configuration-navigator.series.field">navigator.series.field </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The data field containing the series value.</p>

<h3 id="configuration-navigator.series.categoryField">
<a href="#configuration-navigator.series.categoryField">navigator.series.categoryField </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "category")</em>
</h3>

<p>The data item field which contains the category name or date.</p>

<blockquote>
<p>The points will be rendered in chronological order if the category is a date.</p>

<p>If specified, the <a href="#configuration-dateField">dateField</a> option is used as a default.</p>
</blockquote>

<h4>Example - set series date category field</h4>

<pre><code>&lt;div id="stock-chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#stock-chart").kendoStockChart({
    series: [{
      type: "line",
      field: "value",
      categoryField: "date",
      data: [
        { value: 1, date: new Date(2012, 1, 1) },
        { value: 2, date: new Date(2012, 1, 2) }
      ]
    }]
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-navigator.series.name">
<a href="#configuration-navigator.series.name">navigator.series.name </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The navigator series name.</p>

<h4>Example - set the navigator series name</h4>

<pre><code>&lt;div id="stock-chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#stock-chart").kendoStockChart({
  dataSource: {
    data: [
      { value: 1, category: "One", date: new Date(2012, 1, 1)},
      { value: 2, category: "Two", date: new Date(2012, 1, 2)}
    ]
  },
  dateField: "date",
  navigator: {
      series: [
        {
          field: "value",
          name: "Value",
          visibleInLegend: true
        }
      ]
  },
  legend: {
    visible: true,
    position: "bottom"
  }
});
&lt;/script&gt;
</code></pre>

<p>The name can also be a <a href="/api/framework/kendo#methods-template">template</a> which sets the name of the series when bound to grouped data source.</p>

<p>The fields which can be used in the template are:</p>

<ul>
<li>  series - the series options</li>
<li>  group - the data group</li>
<li>  group.field - the name of the field used for grouping</li>
<li>  group.value - the field value for this group.</li>
</ul>

<h4>Example - set the chart series group name template</h4>

<pre><code>&lt;div id="stock-chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#stock-chart").kendoStockChart({
  dataSource: {
    data: [
      { value: 1, category: "One", date: new Date(2012, 1, 1)},
      { value: 2, category: "Two", date: new Date(2012, 1, 2)}
    ],
    group: { field: "category" }
  },
  dateField: "date",
  navigator: {
      series: [
        {
          field: "value",
          name: "Value: #: group.value #",
          visibleInLegend: true
        }
      ]
  },
  legend: {
    visible: true,
    position: "bottom"
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-navigator.series.highlight">
<a href="#configuration-navigator.series.highlight">navigator.series.highlight </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Configures the appearance of highlighted points.</p>

<p>** Applicable to candlestick and ohlc series. **</p>

<h3 id="configuration-navigator.series.highlight.border">
<a href="#configuration-navigator.series.highlight.border">navigator.series.highlight.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of highlighted points. The color is computed automatically from the base point color.</p>

<h3 id="configuration-navigator.series.highlight.border.width">
<a href="#configuration-navigator.series.highlight.border.width">navigator.series.highlight.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-navigator.series.highlight.border.color">
<a href="#configuration-navigator.series.highlight.border.color">navigator.series.highlight.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The border color.</p>

<h3 id="configuration-navigator.series.highlight.border.opacity">
<a href="#configuration-navigator.series.highlight.border.opacity">navigator.series.highlight.border.opacity </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The border opacity.</p>

<h3 id="configuration-navigator.series.highlight.color">
<a href="#configuration-navigator.series.highlight.color">navigator.series.highlight.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The highlight color.</p>

<p>** Available only for pie series **</p>

<h3 id="configuration-navigator.series.highlight.line">
<a href="#configuration-navigator.series.highlight.line">navigator.series.highlight.line </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Line options for highlighted points. The color is computed automatically from the base point color.</p>

<p>** Available only for candlestick series **</p>

<h3 id="configuration-navigator.series.highlight.line.width">
<a href="#configuration-navigator.series.highlight.line.width">navigator.series.highlight.line.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The width of the line.</p>

<h3 id="configuration-navigator.series.highlight.line.color">
<a href="#configuration-navigator.series.highlight.line.color">navigator.series.highlight.line.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The line color.</p>

<h3 id="configuration-navigator.series.highlight.line.opacity">
<a href="#configuration-navigator.series.highlight.line.opacity">navigator.series.highlight.line.opacity </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The opacity of the line.</p>

<h3 id="configuration-navigator.series.highlight.opacity">
<a href="#configuration-navigator.series.highlight.opacity">navigator.series.highlight.opacity </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The opacity of the highlighted points.</p>

<h3 id="configuration-navigator.series.highlight.visible">
<a href="#configuration-navigator.series.highlight.visible">navigator.series.highlight.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: true)</em>
</h3>

<p>A value indicating if the series points should be highlighted.</p>

<h3 id="configuration-navigator.series.aggregate">
<a href="#configuration-navigator.series.aggregate">navigator.series.aggregate </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a> <em>(default: "max")</em>
</h3>

<p>The aggregate function to apply for date series.</p>

<p>This function is used when a category (an year, month, etc.) contains two or more points.
The function return value is displayed instead of the individual points.</p>

<p>The supported values are:</p>

<ul>
<li>"avg" - the average of all values for the date period.</li>
<li>"count" - the number of values for the date period.</li>
<li>"max" - the highest value for the date period.</li>
<li>"min" - the lowest value for the date period.</li>
<li>"sum" - the sum of all values for the date period. Defaults to 0 if no data points are defined.</li>
<li>"sumOrNull" - the sum of all values for the date period. Defaults to <code>null</code> if no data points are defined.</li>
<li>"first" - the first value</li>
<li>function(values, series, dataItems, category) - user-defined aggregate function. Returns single value or data item.</li>
<li>object  - (compound aggregate) <strong>Applicable to "candlestick" and ohlc "series"</strong>. Specifies the aggregate for each data item field.</li>
</ul>

<h5>Example</h5>

<pre data-lang="pseudo"><code>    aggregate: {
        open: "max",
        high: "max",
        close: "min",
        low: "max"
    }
</code></pre>

<h3 id="configuration-navigator.series.axis">
<a href="#configuration-navigator.series.axis">navigator.series.axis </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "primary")</em>
</h3>

<p>The name of the value axis to use.</p>

<p>** Applicable to area, column, line, ohlc and candlestick series **</p>

<h3 id="configuration-navigator.series.border">
<a href="#configuration-navigator.series.border">navigator.series.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the points.</p>

<p>** Applicable to column, ohlc and candlestick series **</p>

<h3 id="configuration-navigator.series.border.color">
<a href="#configuration-navigator.series.border.color">navigator.series.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The color of the border.  It defaults to the color of the current series.</p>

<h3 id="configuration-navigator.series.border.dashType">
<a href="#configuration-navigator.series.border.dashType">navigator.series.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.</p>

<h3 id="configuration-navigator.series.border.width">
<a href="#configuration-navigator.series.border.width">navigator.series.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 1)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-navigator.series.closeField">
<a href="#configuration-navigator.series.closeField">navigator.series.closeField </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The data field containing the close value.</p>

<p>** Available for candlestick and ohlc series only **</p>

<h3 id="configuration-navigator.series.color">
<a href="#configuration-navigator.series.color">navigator.series.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The series base color. The supported values are:</p>

<ul>
<li>CSS color string, including hex and rgb</li>
<li>function(point) - user-defined function that will be evaluated for each point. Returning <code>undefined</code> will assume the default series color.</li>
</ul>

<h3 id="configuration-navigator.series.colorField">
<a href="#configuration-navigator.series.colorField">navigator.series.colorField </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The data field containing the point color.</p>

<p>** Applicable for column, candlestick and ohlc series. **</p>

<h3 id="configuration-navigator.series.downColor">
<a href="#configuration-navigator.series.downColor">navigator.series.downColor </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The series color when the open value is greater than the close value.</p>

<p>** Available for candlestick series only **</p>

<h3 id="configuration-navigator.series.downColorField">
<a href="#configuration-navigator.series.downColorField">navigator.series.downColorField </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The data field containing the color applied when the open value is greater than the close value.</p>

<p>** Available for candlestick series only **</p>

<h3 id="configuration-navigator.series.gap">
<a href="#configuration-navigator.series.gap">navigator.series.gap </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 1.5)</em>
</h3>

<p>The distance between category clusters.</p>

<p>** Applicable for column, candlestick and ohlc series. **</p>

<h3 id="configuration-navigator.series.labels">
<a href="#configuration-navigator.series.labels">navigator.series.labels </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Configures the series data labels.</p>

<h3 id="configuration-navigator.series.labels.background">
<a href="#configuration-navigator.series.labels.background">navigator.series.labels.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the labels.</p>

<h3 id="configuration-navigator.series.labels.border">
<a href="#configuration-navigator.series.labels.border">navigator.series.labels.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the labels.</p>

<h3 id="configuration-navigator.series.labels.border.color">
<a href="#configuration-navigator.series.labels.border.color">navigator.series.labels.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border.</p>

<h3 id="configuration-navigator.series.labels.border.dashType">
<a href="#configuration-navigator.series.labels.border.dashType">navigator.series.labels.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.</p>

<h3 id="configuration-navigator.series.labels.border.width">
<a href="#configuration-navigator.series.labels.border.width">navigator.series.labels.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-navigator.series.labels.color">
<a href="#configuration-navigator.series.labels.color">navigator.series.labels.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the labels.</p>

<h3 id="configuration-navigator.series.labels.font">
<a href="#configuration-navigator.series.labels.font">navigator.series.labels.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "12px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The font style of the labels.</p>

<h3 id="configuration-navigator.series.labels.format">
<a href="#configuration-navigator.series.labels.format">navigator.series.labels.format </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The format of the labels.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    //sets format of the labels
    format: "C"
</code></pre>

<h3 id="configuration-navigator.series.labels.margin">
<a href="#configuration-navigator.series.labels.margin">navigator.series.labels.margin </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a><em>(default: { left: 5, right: 5})</em>
</h3>

<p>The margin of the labels.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    // sets the top, right, bottom and left margin to 3px.
    margin: 3

    // sets the top and bottom margin to 1px
    // margin left and right are with 5px (by default)
    margin: { top: 1, bottom: 1 }
</code></pre>

<h3 id="configuration-navigator.series.labels.padding">
<a href="#configuration-navigator.series.labels.padding">navigator.series.labels.padding </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a><em>(default: 0)</em>
</h3>

<p>The padding of the labels.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    // sets the top, right, bottom and left padding to 3px.
    padding: 3

    // sets the top and left padding to 1px
    // padding right and bottom are with 0px (by default)
    padding: { top: 1, left: 1 }
</code></pre>

<h3 id="configuration-navigator.series.labels.position">
<a href="#configuration-navigator.series.labels.position">navigator.series.labels.position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "above")</em>
</h3>

<p>Defines the position of the labels.</p>

<h4><em>"above"</em></h4>

<p>The label is positioned at the top of the marker.</p>

<p>** Applicable for area and line series. **</p>

<h4><em>"center"</em></h4>

<p>The label is positioned at the point center.</p>

<p>** Applicable for column series only. **</p>

<h4><em>"insideEnd"</em></h4>

<p>The label is positioned inside, near the end of the point.</p>

<p>** Applicable for column series only. **</p>

<h4><em>"insideBase"</em></h4>

<p>The label is positioned inside, near the base of the bar.</p>

<p>** Applicable for column series. **</p>

<h4><em>"outsideEnd"</em></h4>

<p>The label is positioned outside, near the end of the bar.</p>

<p>** Applicable for column series only.  Not applicable for stacked series. **</p>

<h4><em>"right"</em></h4>

<p>The label is positioned to the right of the marker.</p>

<p>** Applicable for area and line series. **</p>

<h4><em>"below"</em></h4>

<p>The label is positioned at the bottom of the marker.</p>

<p>** Applicable for area and line series. **</p>

<h4><em>"left"</em></h4>

<p>The label is positioned to the left of the marker.</p>

<p>** Applicable for area and line series. **</p>

<h3 id="configuration-navigator.series.labels.template">
<a href="#configuration-navigator.series.labels.template">navigator.series.labels.template </a><code>String  |</code><code> Function</code>
</h3>

<p>The <a href="/api/framework/kendo#methods-template">template</a> which renders the chart series label.</p>

<p>The fields which can be used in the template are:</p>

<ul>
<li>  category - the category name. Available for area, bar, column, bubble, donut, line and pie series.</li>
<li>  dataItem - the original data item used to construct the point. Will be null if binding to array.</li>
<li>  percentage - the point value represented as a percentage value. Available only for 100% stacked charts.</li>
<li>  series - the data series</li>
<li>  value - the point value. Can be a number or object containing each bound field.</li>
</ul>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    $("#chart").kendoChart({
         title: {
             text: "My Chart Title"
         },
         series: [
             {
                 type: "area",
                 name: "Series 1",
                 data: [200, 450, 300, 125],
                 labels: {
                     // label template
                     template: "#= value #%",
                     visible: true
                 }
             }
         ],
         categoryAxis: {
             categories: [2000, 2001, 2002, 2003]
         }
    });
</code></pre>

<h3 id="configuration-navigator.series.labels.visible">
<a href="#configuration-navigator.series.labels.visible">navigator.series.labels.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>The visibility of the labels.</p>

<h3 id="configuration-navigator.series.line">
<a href="#configuration-navigator.series.line">navigator.series.line </a><code>String  |</code><code> Object</code>
</h3>

<p>Line options.</p>

<p>** Applicable to area, candlestick and ohlc series. **</p>

<h3 id="configuration-navigator.series.line.color">
<a href="#configuration-navigator.series.line.color">navigator.series.line.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The line color.</p>

<h3 id="configuration-navigator.series.line.opacity">
<a href="#configuration-navigator.series.line.opacity">navigator.series.line.opacity </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 1)</em>
</h3>

<p>The line opacity.</p>

<h3 id="configuration-navigator.series.line.width">
<a href="#configuration-navigator.series.line.width">navigator.series.line.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: 4)</em>
</h3>

<p>The line width.</p>

<h3 id="configuration-navigator.series.lowField">
<a href="#configuration-navigator.series.lowField">navigator.series.lowField </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The data field containing the low value.</p>

<p>** Available for candlestick and ohlc series **</p>

<h3 id="configuration-navigator.series.markers">
<a href="#configuration-navigator.series.markers">navigator.series.markers </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Marker options.</p>

<p>** Applicable for area and line series. **</p>

<h3 id="configuration-navigator.series.markers.background">
<a href="#configuration-navigator.series.markers.background">navigator.series.markers.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the current series markers.</p>

<h3 id="configuration-navigator.series.markers.border">
<a href="#configuration-navigator.series.markers.border">navigator.series.markers.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the markers.</p>

<h3 id="configuration-navigator.series.markers.border.color">
<a href="#configuration-navigator.series.markers.border.color">navigator.series.markers.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border.</p>

<h3 id="configuration-navigator.series.markers.border.width">
<a href="#configuration-navigator.series.markers.border.width">navigator.series.markers.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-navigator.series.markers.rotation">
<a href="#configuration-navigator.series.markers.rotation">navigator.series.markers.rotation </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The rotation angle of the markers.</p>

<h4>Example</h4>

<pre><code>&lt;div id="stock-chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#stock-chart").kendoStockChart({
    navigator: {
      series: [{
        type: "line",
        field: "value",
        categoryField: "date",
        markers: {
          type: "square",
          rotation: 45
        },
        data: [
          { value: 1, date: new Date(2012, 1, 1) },
          { value: 2, date: new Date(2012, 1, 2) }
        ]
      }]
    }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-navigator.series.markers.size">
<a href="#configuration-navigator.series.markers.size">navigator.series.markers.size </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 6)</em>
</h3>

<p>The marker size.</p>

<h3 id="configuration-navigator.series.markers.type">
<a href="#configuration-navigator.series.markers.type">navigator.series.markers.type </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "circle")</em>
</h3>

<p>Configures the markers shape type.</p>

<h4><em>"square"</em></h4>

<p>The marker shape is square.</p>

<h4><em>"triangle"</em></h4>

<p>The marker shape is triangle.</p>

<h4><em>"circle"</em></h4>

<p>The marker shape is circle.</p>

<h4><em>"cross"</em></h4>

<p>The marker shape is cross.</p>

<h3 id="configuration-navigator.series.markers.visible">
<a href="#configuration-navigator.series.markers.visible">navigator.series.markers.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>The markers visibility.</p>

<h3 id="configuration-navigator.series.missingValues">
<a href="#configuration-navigator.series.missingValues">navigator.series.missingValues </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The behavior for handling missing values. The supported values are:</p>

<ul>
<li>"gap" - the plot stops before the missing point and continues after it.</li>
<li>"interpolate" - the value is interpolated from neighboring points.</li>
<li>"zero" - the value is assumed to be zero.</li>
</ul>

<blockquote>
<p>The default value is "interpolate", except for "area" and stacked series which default to "zero".</p>

<p>The <code>missingValues</code> option is supported when <a href="#configuration-series.type">series.type</a> is set to "area" and "line".</p>
</blockquote>

<h3 id="configuration-navigator.series.style">
<a href="#configuration-navigator.series.style">navigator.series.style </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "normal")</em>
</h3>

<p>The supported values are:</p>

<ul>
<li>"normal" - The values will be connected with straight line.</li>
<li>"step" - The values will be connected with a line with right angle.</li>
</ul>

<blockquote>
<p>The default value is "normal".</p>

<p>The <code>style</code> option is supported when <a href="#configuration-series.type">series.type</a> is set to "area", "line".</p>
</blockquote>

<h3 id="configuration-navigator.series.opacity">
<a href="#configuration-navigator.series.opacity">navigator.series.opacity </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The series opacity.</p>

<h3 id="configuration-navigator.series.openField">
<a href="#configuration-navigator.series.openField">navigator.series.openField </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The data field containing the open value.</p>

<p>** Available for candlestick and ohlc series **</p>

<h3 id="configuration-navigator.series.overlay">
<a href="#configuration-navigator.series.overlay">navigator.series.overlay </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The effects overlay.</p>

<h3 id="configuration-navigator.series.overlay.gradient">
<a href="#configuration-navigator.series.overlay.gradient">navigator.series.overlay.gradient </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The gradient name.</p>

<p>Available options:</p>

<ul>
<li>
<strong>glass</strong> (column and candlestick series)</li>
<li><strong>none</strong></li>
</ul>

<h3 id="configuration-navigator.series.spacing">
<a href="#configuration-navigator.series.spacing">navigator.series.spacing </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0.4)</em>
</h3>

<p>Space between points as proportion of the point width.</p>

<p>Available for column, candlestick and ohlc series.</p>

<h3 id="configuration-navigator.series.stack">
<a href="#configuration-navigator.series.stack">navigator.series.stack </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> <em>(default: false)</em>
</h3>

<p>A boolean value indicating if the series should be stacked.
A string value is interpreted as <a href="#configuration-series.stack.group">navigator.series.stack.group</a>.</p>

<blockquote>
<p>The <code>stack</code> options is supported when <a href="#configuration-series.type">navigator.series.type</a> is set to "bar", "column", "line", "area", "verticalLine", "verticalArea", "radarLine", "radarArea" and "radarColumn".</p>

<p>Stack settings of the first series are applied to the rest of the series.</p>
</blockquote>

<h3 id="configuration-navigator.series.stack.type">
<a href="#configuration-navigator.series.stack.type">navigator.series.stack.type </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "normal")</em>
</h3>

<p>The type of stack to plot. The following types are supported:</p>

<ul>
<li>"normal" - the value of the stack is the sum of all points in the category (or group)</li>
<li>"100%" - the value of the stack is always 100% (1.00). Points within the category (or group) are represented as percentages.</li>
</ul>

<h3 id="configuration-navigator.series.stack.group">
<a href="#configuration-navigator.series.stack.group">navigator.series.stack.group </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>Indicates that the series should be stacked in a group with the specified name.</p>

<blockquote>
<p>The <code>group</code> option is supported when <a href="#configuration-series.type">navigator.series.type</a> is set to "bar" or "column".</p>
</blockquote>

<h3 id="configuration-navigator.series.tooltip">
<a href="#configuration-navigator.series.tooltip">navigator.series.tooltip </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The data point tooltip configuration options.</p>

<h3 id="configuration-navigator.series.tooltip.background">
<a href="#configuration-navigator.series.tooltip.background">navigator.series.tooltip.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the tooltip. The default is determined from the series color.</p>

<h3 id="configuration-navigator.series.tooltip.border">
<a href="#configuration-navigator.series.tooltip.border">navigator.series.tooltip.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border configuration options.</p>

<h3 id="configuration-navigator.series.tooltip.border.color">
<a href="#configuration-navigator.series.tooltip.border.color">navigator.series.tooltip.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border.</p>

<h3 id="configuration-navigator.series.tooltip.border.width">
<a href="#configuration-navigator.series.tooltip.border.width">navigator.series.tooltip.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-navigator.series.tooltip.color">
<a href="#configuration-navigator.series.tooltip.color">navigator.series.tooltip.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the tooltip. The default is the same as the series labels color.</p>

<h3 id="configuration-navigator.series.tooltip.font">
<a href="#configuration-navigator.series.tooltip.font">navigator.series.tooltip.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "12px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The tooltip font.</p>

<h3 id="configuration-navigator.series.tooltip.format">
<a href="#configuration-navigator.series.tooltip.format">navigator.series.tooltip.format </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The tooltip format. Format variables depend on the series type:</p>

<ul>
<li>Area, column, line and pie

<ul>
<li>  <strong>0</strong> - value</li>
</ul>
</li>
<li>Candlestick and OHLC

<ul>
<li>  <strong>0</strong> - open value</li>
<li>  <strong>1</strong> - high value</li>
<li>  <strong>2</strong> - low value</li>
<li>  <strong>3</strong> - close value</li>
<li>  <strong>4</strong> - category name</li>
</ul>
</li>
</ul>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    //sets format of the tooltip
    format: "{0:C}--{1:C}"
</code></pre>

<h3 id="configuration-navigator.series.tooltip.padding">
<a href="#configuration-navigator.series.tooltip.padding">navigator.series.tooltip.padding </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The padding of the tooltip.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    // sets the top, right, bottom and left padding to 3px.
    padding: 3

    // sets the top and left padding to 1px
    // right and bottom padding are left at their default values
    padding: { top: 1, left: 1 }
</code></pre>

<h3 id="configuration-navigator.series.tooltip.template">
<a href="#configuration-navigator.series.tooltip.template">navigator.series.tooltip.template </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The tooltip template.
Template variables:</p>

<ul>
<li>  <strong>value</strong> - the point value (either a number or an object)</li>
<li>  <strong>category</strong> - the category name</li>
<li>  <strong>series</strong> - the data series</li>
<li>  <strong>dataItem</strong> - the original data item used to construct the point.
    Will be null if binding to array.</li>
</ul>

<h4>Example</h4>

<pre><code>&lt;div id="stock-chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#stock-chart").kendoStockChart({
    navigator: {
      series: {
        tooltip: {
          visible: true,
          template: "#= value # - #= date #"
        },

        type: "line",
        field: "value",
        categoryField: "date",
        data: [
          { value: 1, date: new Date(2012, 1, 1) },
          { value: 2, date: new Date(2012, 1, 2) }
        ]
      }
    }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-navigator.series.tooltip.visible">
<a href="#configuration-navigator.series.tooltip.visible">navigator.series.tooltip.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>A value indicating if the tooltip should be displayed.</p>

<h3 id="configuration-navigator.series.width">
<a href="#configuration-navigator.series.width">navigator.series.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The line width.</p>

<p>** Applicable for line series. **</p>

<h3 id="configuration-navigator.select">
<a href="#configuration-navigator.select">navigator.select </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Specifies the initially selected range.</p>

<p>The full range of values is shown if no range is specified.</p>

<h4>Example</h4>

<pre><code>&lt;div id="stock-chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#stock-chart").kendoStockChart({
    navigator: {
      select: {
          from: "2012/02/01",
          to: "2012/02/02"
      },

      series: {
        type: "line",
        field: "value",
        categoryField: "date",
        tooltip: {
          visible: true,
          template: "#= value # - #= date #"
        },
        data: [
          { value: 1, date: new Date(2012, 1, 1) },
          { value: 2, date: new Date(2012, 1, 2) },
          { value: 1, date: new Date(2012, 1, 3) }
        ]
      }
    }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-navigator.select.from">
<a href="#configuration-navigator.select.from">navigator.select.from </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" class="type-link"><code>Date</code></a>|<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The lower boundary of the selected range.</p>

<h3 id="configuration-navigator.select.mousewheel">
<a href="#configuration-navigator.select.mousewheel">navigator.select.mousewheel </a><code>Object  |</code><code> Boolean</code>
</h3>

<p>The mousewheel configuration of the selection.</p>

<p>If set to <code>false</code> the mousewheel will not update the selection.</p>

<h4>Example - configure the selection mousewheel behavior</h4>

<pre><code>&lt;div id="stock-chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#stock-chart").kendoStockChart({
    navigator: {
      select: {
          from: "2012/02/01",
          to: "2012/02/02",
          mousewheel: {
            reverse: true,
            zoom: "both"
          }
      },

      series: {
        type: "line",
        field: "value",
        categoryField: "date",
        tooltip: {
          visible: true,
          template: "#= value # - #= date #"
        },
        data: [
          { value: 1, date: new Date(2012, 1, 1) },
          { value: 2, date: new Date(2012, 1, 2) },
          { value: 1, date: new Date(2012, 1, 3) }
        ]
      }
    }
});
</code></pre>

<h4>Example - disable the selection mousewheel behavior</h4>

<pre><code>&lt;div id="stock-chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#stock-chart").kendoStockChart({
    navigator: {
      select: {
          from: "2012/02/01",
          to: "2012/02/02",
          mousewheel: false
      },

      series: {
        type: "line",
        field: "value",
        categoryField: "date",
        tooltip: {
          visible: true,
          template: "#= value # - #= date #"
        },
        data: [
          { value: 1, date: new Date(2012, 1, 1) },
          { value: 2, date: new Date(2012, 1, 2) },
          { value: 1, date: new Date(2012, 1, 3) }
        ]
      }
    }
});
</code></pre>

<h3 id="configuration-navigator.select.mousewheel.reverse">
<a href="#configuration-navigator.select.mousewheel.reverse">navigator.select.mousewheel.reverse </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: false)</em>
</h3>

<p>If set to <code>true</code> will reverse the mouse wheel direction. The normal direction is down for "zoom out", up for "zoom in".</p>

<h3 id="configuration-navigator.select.mousewheel.zoom">
<a href="#configuration-navigator.select.mousewheel.zoom">navigator.select.mousewheel.zoom </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "both")</em>
</h3>

<p>The zoom direction.</p>

<p>The supported values are:</p>

<ul>
<li>"both" - zooming expands and contracts the selection both sides</li>
<li>"left" - zooming expands and contracts the selection left side only</li>
<li>"right" - zooming expands and contracts the selection right side only</li>
</ul>

<h3 id="configuration-navigator.select.to">
<a href="#configuration-navigator.select.to">navigator.select.to </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" class="type-link"><code>Date</code></a>|<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The upper boundary of the selected range.</p>

<h3 id="configuration-navigator.hint">
<a href="#configuration-navigator.hint">navigator.hint </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Default options for the navigator hint.</p>

<h3 id="configuration-navigator.hint.visible">
<a href="#configuration-navigator.hint.visible">navigator.hint.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: true)</em>
</h3>

<p>The visibility of the hint.</p>

<h3 id="configuration-navigator.hint.template">
<a href="#configuration-navigator.hint.template">navigator.hint.template </a><code>String  |</code><code> Function</code>
</h3>

<p>The hint template.
Template variables:</p>

<ul>
<li>  <strong>from</strong> - The lower boundary of the selected range</li>
<li>  <strong>to</strong> - Theupper boundary of the selected range</li>
</ul>

<h4>Example</h4>

<pre><code>&lt;div id="stock-chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#stock-chart").kendoStockChart({
    navigator: {
      hint: {
        template: "From: #= from # To: #= to #"
      },

      series: {
        type: "line",
        field: "value",
        categoryField: "date",
        data: [
          { value: 1, date: new Date(2012, 1, 1) },
          { value: 2, date: new Date(2012, 1, 2) },
          { value: 1, date: new Date(2012, 1, 3) }
        ]
      }
    }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-navigator.hint.format">
<a href="#configuration-navigator.hint.format">navigator.hint.format </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The format of the hint.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    //sets format of the hint
    format: "From: {0:d} To: {1:d}"
</code></pre>

<h3 id="configuration-axisDefaults">
<a href="#configuration-axisDefaults">axisDefaults </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Default options for all chart axes.</p>

<h3 id="configuration-categoryAxis">
<a href="#configuration-categoryAxis">categoryAxis </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>The category axis configuration options.</p>

<h3 id="configuration-categoryAxis.axisCrossingValue">
<a href="#configuration-categoryAxis.axisCrossingValue">categoryAxis.axisCrossingValue </a><code>Object  |</code><code> Date  |</code><code> Array</code>
</h3>

<p>Category index at which the first value axis crosses this axis. (Only for object)</p>

<p>Category indicies at which the value axes cross the category axis. (Only for array)</p>

<p><strong>Note:</strong> Specify an index greater than or equal to the number
of categories to denote the far end of the axis.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    $("#stock-chart").kendoStockChart({
         categoryAxis: {
             categories: ["A", "B"],
             axisCrossingValue: [0, 100]
         },
         valueAxis: [{ }, { name: "secondary" }]
    });
</code></pre>

<h3 id="configuration-categoryAxis.categories">
<a href="#configuration-categoryAxis.categories">categoryAxis.categories </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>Array of category names.</p>

<h3 id="configuration-categoryAxis.color">
<a href="#configuration-categoryAxis.color">categoryAxis.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>Color to apply to all axis elements. Any valid CSS color string will work here, including hex and rgb.
Individual color settings for line and labels take priority.</p>

<h3 id="configuration-categoryAxis.field">
<a href="#configuration-categoryAxis.field">categoryAxis.field </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The data field containing the category name.</p>

<h4>Example</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;

// assuming the following data...
var data = [ { sales: 200, year: 2005 }, { sales: 300, year: 2006 }, { sales: 400, year: 2007 }];
// specify the "year" as the field for the category axis
$("#chart").kendoChart({
    dataSource: {
        data: data
    },
    categoryAxis: {
        field: "year"
    }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.justified">
<a href="#configuration-categoryAxis.justified">categoryAxis.justified </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>Positions categories and series points on major ticks. This removes the empty space before and after the series.</p>

<p>This option is ignored if either column, ohlc or candlestick series are plotted on the axis.</p>

<h3 id="configuration-categoryAxis.labels">
<a href="#configuration-categoryAxis.labels">categoryAxis.labels </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Configures the axis labels.</p>

<h3 id="configuration-categoryAxis.labels.background">
<a href="#configuration-categoryAxis.labels.background">categoryAxis.labels.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the labels. Any valid CSS color string will work here, including hex and rgb.</p>

<h3 id="configuration-categoryAxis.labels.border">
<a href="#configuration-categoryAxis.labels.border">categoryAxis.labels.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the labels.</p>

<h3 id="configuration-categoryAxis.labels.border.color">
<a href="#configuration-categoryAxis.labels.border.color">categoryAxis.labels.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border. Any valid CSS color string will work here, including hex and rgb.</p>

<h3 id="configuration-categoryAxis.labels.border.dashType">
<a href="#configuration-categoryAxis.labels.border.dashType">categoryAxis.labels.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.</p>

<h3 id="configuration-categoryAxis.labels.border.width">
<a href="#configuration-categoryAxis.labels.border.width">categoryAxis.labels.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-categoryAxis.labels.color">
<a href="#configuration-categoryAxis.labels.color">categoryAxis.labels.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the labels. Any valid CSS color string will work here, including hex and rgb.</p>

<h3 id="configuration-categoryAxis.labels.font">
<a href="#configuration-categoryAxis.labels.font">categoryAxis.labels.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "12px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The font style of the labels.</p>

<h3 id="configuration-categoryAxis.labels.format">
<a href="#configuration-categoryAxis.labels.format">categoryAxis.labels.format </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The format of the labels.</p>

<h3 id="configuration-categoryAxis.labels.margin">
<a href="#configuration-categoryAxis.labels.margin">categoryAxis.labels.margin </a><code>Number  |</code><code> Object</code><em>(default: 0)</em>
</h3>

<p>The margin of the labels.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    // sets the top, right, bottom and left margin to 3px.
    margin: 3

    // sets the top and left margin to 1px
    // margin right and bottom are with 0px (by default)
    margin: { top: 1, left: 1 }
</code></pre>

<h3 id="configuration-categoryAxis.labels.mirror">
<a href="#configuration-categoryAxis.labels.mirror">categoryAxis.labels.mirror </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a>
</h3>

<p>Mirrors the axis labels and ticks.
If the labels are normally on the left side of the axis,
mirroring the axis will render them to the right.</p>

<h3 id="configuration-categoryAxis.labels.padding">
<a href="#configuration-categoryAxis.labels.padding">categoryAxis.labels.padding </a><code>Number  |</code><code> Object</code><em>(default: 0)</em>
</h3>

<p>The padding of the labels.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    // sets the top, right, bottom and left padding to 3px.
    padding: 3

    // sets the top and left padding to 1px
    // padding right and bottom are with 0px (by default)
    padding: { top: 1, left: 1 }
</code></pre>

<h3 id="configuration-categoryAxis.labels.rotation">
<a href="#configuration-categoryAxis.labels.rotation">categoryAxis.labels.rotation </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The rotation angle of the labels.</p>

<h3 id="configuration-categoryAxis.labels.skip">
<a href="#configuration-categoryAxis.labels.skip">categoryAxis.labels.skip </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 1)</em>
</h3>

<p>Number of labels to skip.
Skips rendering the first n labels.</p>

<h3 id="configuration-categoryAxis.labels.step">
<a href="#configuration-categoryAxis.labels.step">categoryAxis.labels.step </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 1)</em>
</h3>

<p>Label rendering step.
Every n-th label is rendered where n is the step</p>

<h3 id="configuration-categoryAxis.labels.template">
<a href="#configuration-categoryAxis.labels.template">categoryAxis.labels.template </a><code>String  |</code><code> Function</code>
</h3>

<p>The <a href="/api/framework/kendo#methods-template">template</a> which renders the labels.</p>

<p>The fields which can be used in the template are:</p>

<ul>
<li>value - the category value</li>
<li>dataItem - the data item, in case a field has been specified</li>
</ul>

<h4>Example</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
// chart initialization
$("#chart").kendoChart({
     title: {
         text: "My Chart Title"
     },
     series: [{
         name: "Series 1",
         data: [200, 450, 300, 125]
     }],
     categoryAxis: {
         categories: [2000, 2001, 2002, 2003],
         labels: {
             // labels template
             template: "Year: #= value #"
         }
     }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.labels.visible">
<a href="#configuration-categoryAxis.labels.visible">categoryAxis.labels.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: true)</em>
</h3>

<p>The visibility of the labels.</p>

<h3 id="configuration-categoryAxis.line">
<a href="#configuration-categoryAxis.line">categoryAxis.line </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Configures the axis line. This will also effect major and minor ticks, but not gridlines.</p>

<h3 id="configuration-categoryAxis.line.color">
<a href="#configuration-categoryAxis.line.color">categoryAxis.line.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the lines. Any valid CSS color string will work here, including hex and rgb.</p>

<p><strong>Note:</strong> This will also effect the major and minor ticks, but not the grid lines.</p>

<h3 id="configuration-categoryAxis.line.dashType">
<a href="#configuration-categoryAxis.line.dashType">categoryAxis.line.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of the line.</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.</p>

<h3 id="configuration-categoryAxis.line.visible">
<a href="#configuration-categoryAxis.line.visible">categoryAxis.line.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: true)</em>
</h3>

<p>The visibility of the lines.</p>

<h3 id="configuration-categoryAxis.line.width">
<a href="#configuration-categoryAxis.line.width">categoryAxis.line.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 1)</em>
</h3>

<p>The width of the line. This will also effect the major and minor ticks, but
not the grid lines.</p>

<h3 id="configuration-categoryAxis.majorGridLines">
<a href="#configuration-categoryAxis.majorGridLines">categoryAxis.majorGridLines </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Configures the major grid lines. These are the lines that are an extension of the major ticks through the
body of the chart.</p>

<h3 id="configuration-categoryAxis.majorGridLines.color">
<a href="#configuration-categoryAxis.majorGridLines.color">categoryAxis.majorGridLines.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the lines. Any valid CSS color string will work here, including hex and rgb.</p>

<h3 id="configuration-categoryAxis.majorGridLines.dashType">
<a href="#configuration-categoryAxis.majorGridLines.dashType">categoryAxis.majorGridLines.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of the grid lines.</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.</p>

<h3 id="configuration-categoryAxis.majorGridLines.visible">
<a href="#configuration-categoryAxis.majorGridLines.visible">categoryAxis.majorGridLines.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>The visibility of the lines.</p>

<h3 id="configuration-categoryAxis.majorGridLines.width">
<a href="#configuration-categoryAxis.majorGridLines.width">categoryAxis.majorGridLines.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 1)</em>
</h3>

<p>The width of the lines.</p>

<h3 id="configuration-categoryAxis.majorGridLines.step">
<a href="#configuration-categoryAxis.majorGridLines.step">categoryAxis.majorGridLines.step </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>The step of the category axis major grid lines.</p>

<h3 id="configuration-categoryAxis.majorGridLines.skip">
<a href="#configuration-categoryAxis.majorGridLines.skip">categoryAxis.majorGridLines.skip </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The skip of the category axis major grid lines.</p>

<h3 id="configuration-categoryAxis.majorTicks">
<a href="#configuration-categoryAxis.majorTicks">categoryAxis.majorTicks </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The major ticks of the axis.</p>

<h3 id="configuration-categoryAxis.majorTicks.color">
<a href="#configuration-categoryAxis.majorTicks.color">categoryAxis.majorTicks.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "black")</em>
</h3>

<p>The color of the category axis major ticks lines. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-categoryAxis.majorTicks.size">
<a href="#configuration-categoryAxis.majorTicks.size">categoryAxis.majorTicks.size </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 4)</em>
</h3>

<p>The axis major tick size. This is the length of the line in pixels that is drawn to indicate the tick
on the chart.</p>

<h3 id="configuration-categoryAxis.majorTicks.width">
<a href="#configuration-categoryAxis.majorTicks.width">categoryAxis.majorTicks.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>The width of the major ticks in pixels.</p>

<h3 id="configuration-categoryAxis.majorTicks.visible">
<a href="#configuration-categoryAxis.majorTicks.visible">categoryAxis.majorTicks.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: true)</em>
</h3>

<p>The visibility of the major ticks.</p>

<h3 id="configuration-categoryAxis.majorTicks.step">
<a href="#configuration-categoryAxis.majorTicks.step">categoryAxis.majorTicks.step </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>The step of the category axis major ticks.</p>

<h3 id="configuration-categoryAxis.majorTicks.skip">
<a href="#configuration-categoryAxis.majorTicks.skip">categoryAxis.majorTicks.skip </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The skip of the category axis major ticks.</p>

<h3 id="configuration-categoryAxis.minorGridLines">
<a href="#configuration-categoryAxis.minorGridLines">categoryAxis.minorGridLines </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Configures the minor grid lines.  These are the lines that are an extension of the minor ticks through
the body of the chart.</p>

<p>Note that minor grid lines are not visible by default, therefore none of these settings will take effect with the minor grid lines visibility being set to <strong>true</strong>.</p>

<h3 id="configuration-categoryAxis.minorGridLines.color">
<a href="#configuration-categoryAxis.minorGridLines.color">categoryAxis.minorGridLines.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the lines. Any valid CSS color string will work here, including hex and
rgb.</p>

<p>Note that this setting has no effect if the visibility of the minor
grid lines is not set to <strong>true</strong>.</p>

<h3 id="configuration-categoryAxis.minorGridLines.dashType">
<a href="#configuration-categoryAxis.minorGridLines.dashType">categoryAxis.minorGridLines.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of the grid lines.</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.</p>

<h3 id="configuration-categoryAxis.minorGridLines.visible">
<a href="#configuration-categoryAxis.minorGridLines.visible">categoryAxis.minorGridLines.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>The visibility of the lines.</p>

<h3 id="configuration-categoryAxis.minorGridLines.width">
<a href="#configuration-categoryAxis.minorGridLines.width">categoryAxis.minorGridLines.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The width of the lines.</p>

<p>Note that this setting has no effect if the visibility of the minor
grid lines is not set to <strong>true</strong>.</p>

<h3 id="configuration-categoryAxis.minorGridLines.step">
<a href="#configuration-categoryAxis.minorGridLines.step">categoryAxis.minorGridLines.step </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>The step of the category axis minor grid lines.</p>

<h3 id="configuration-categoryAxis.minorGridLines.skip">
<a href="#configuration-categoryAxis.minorGridLines.skip">categoryAxis.minorGridLines.skip </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The skip of the category axis minor grid lines.</p>

<h3 id="configuration-categoryAxis.minorTicks">
<a href="#configuration-categoryAxis.minorTicks">categoryAxis.minorTicks </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The minor ticks of the axis.</p>

<h3 id="configuration-categoryAxis.minorTicks.size">
<a href="#configuration-categoryAxis.minorTicks.size">categoryAxis.minorTicks.size </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 3)</em>
</h3>

<p>The axis minor tick size. This is the length of the line in pixels that is drawn to indicate the tick
on the chart.</p>

<h3 id="configuration-categoryAxis.minorTicks.visible">
<a href="#configuration-categoryAxis.minorTicks.visible">categoryAxis.minorTicks.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>The visibility of the minor ticks.</p>

<h3 id="configuration-categoryAxis.minorTicks.color">
<a href="#configuration-categoryAxis.minorTicks.color">categoryAxis.minorTicks.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "black")</em>
</h3>

<p>The color of the category axis minor ticks lines. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-categoryAxis.minorTicks.width">
<a href="#configuration-categoryAxis.minorTicks.width">categoryAxis.minorTicks.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>The width of the minor ticks in pixels.</p>

<h3 id="configuration-categoryAxis.minorTicks.step">
<a href="#configuration-categoryAxis.minorTicks.step">categoryAxis.minorTicks.step </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>The step of the category axis minor ticks.</p>

<h3 id="configuration-categoryAxis.minorTicks.skip">
<a href="#configuration-categoryAxis.minorTicks.skip">categoryAxis.minorTicks.skip </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The skip of the category axis minor ticks.</p>

<h3 id="configuration-categoryAxis.name">
<a href="#configuration-categoryAxis.name">categoryAxis.name </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "primary")</em>
</h3>

<p>The unique axis name.</p>

<h3 id="configuration-categoryAxis.pane">
<a href="#configuration-categoryAxis.pane">categoryAxis.pane </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The name of the pane that the axis should be rendered in.
The axis will be rendered in the first (default) pane if not set.</p>

<h3 id="configuration-categoryAxis.plotBands">
<a href="#configuration-categoryAxis.plotBands">categoryAxis.plotBands </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>The plot bands of the category axis.</p>

<h3 id="configuration-categoryAxis.plotBands.from">
<a href="#configuration-categoryAxis.plotBands.from">categoryAxis.plotBands.from </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The start position of the plot band in axis units.</p>

<h3 id="configuration-categoryAxis.plotBands.to">
<a href="#configuration-categoryAxis.plotBands.to">categoryAxis.plotBands.to </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The end position of the plot band in axis units.</p>

<h3 id="configuration-categoryAxis.plotBands.color">
<a href="#configuration-categoryAxis.plotBands.color">categoryAxis.plotBands.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The color of the plot band.</p>

<h3 id="configuration-categoryAxis.plotBands.opacity">
<a href="#configuration-categoryAxis.plotBands.opacity">categoryAxis.plotBands.opacity </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The opacity of the plot band.</p>

<h3 id="configuration-categoryAxis.reverse">
<a href="#configuration-categoryAxis.reverse">categoryAxis.reverse </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>Reverses the axis direction -
categories are listed from right to left and from top to bottom.</p>

<h3 id="configuration-categoryAxis.select">
<a href="#configuration-categoryAxis.select">categoryAxis.select </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The selected axis range. If configured, axis selection will be enabled.</p>

<h3 id="configuration-categoryAxis.select.from">
<a href="#configuration-categoryAxis.select.from">categoryAxis.select.from </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" class="type-link"><code>Date</code></a>
</h3>

<p>The lower boundary of the selected range.</p>

<h3 id="configuration-categoryAxis.select.to">
<a href="#configuration-categoryAxis.select.to">categoryAxis.select.to </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" class="type-link"><code>Date</code></a>
</h3>

<p>The upper boundary of the selected range.</p>

<p><em>Note</em>: The category with the specified date is not included in the selected range
unless the axis is justified. In order to select all categories specify
a value larger than the last category date.</p>

<h3 id="configuration-categoryAxis.select.min">
<a href="#configuration-categoryAxis.select.min">categoryAxis.select.min </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The minimum value that is selectable by the user.</p>

<h3 id="configuration-categoryAxis.select.max">
<a href="#configuration-categoryAxis.select.max">categoryAxis.select.max </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The maximum value that is selectable by the user.</p>

<p><em>Note</em>: The category with the specified index (date) is not included in the selected range
unless the axis is justified. In order to select all categories specify
a value larger than the last category index (date).</p>

<h3 id="configuration-categoryAxis.select.mousewheel">
<a href="#configuration-categoryAxis.select.mousewheel">categoryAxis.select.mousewheel </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Mousewheel zoom settings for the selection.</p>

<h3 id="configuration-categoryAxis.select.mousewheel.reverse">
<a href="#configuration-categoryAxis.select.mousewheel.reverse">categoryAxis.select.mousewheel.reverse </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: true)</em>
</h3>

<p>Reverses the mousewheel zoom direction.
Normal direction is down for "zoom out", up for "zoom in".</p>

<h3 id="configuration-categoryAxis.select.mousewheel.zoom">
<a href="#configuration-categoryAxis.select.mousewheel.zoom">categoryAxis.select.mousewheel.zoom </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "both")</em>
</h3>

<p>The zoom direction. Possible values:</p>

<h4><em>"both"</em></h4>

<p>Zooming expands and contracts the selection both sides.</p>

<h4><em>"left"</em></h4>

<p>Zooming expands and contracts the selection left side only.</p>

<h4><em>"right"</em></h4>

<p>Zooming expands and contracts the selection right side only.</p>

<h3 id="configuration-categoryAxis.title">
<a href="#configuration-categoryAxis.title">categoryAxis.title </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The title of the category axis.</p>

<h3 id="configuration-categoryAxis.title.background">
<a href="#configuration-categoryAxis.title.background">categoryAxis.title.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the title. Any valid CSS color string will work here, including
hex and rgb.</p>

<h3 id="configuration-categoryAxis.title.border">
<a href="#configuration-categoryAxis.title.border">categoryAxis.title.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the title.</p>

<h3 id="configuration-categoryAxis.title.border.color">
<a href="#configuration-categoryAxis.title.border.color">categoryAxis.title.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border. Any valid CSS color string will work here, including
hex and rgb.</p>

<h3 id="configuration-categoryAxis.title.border.dashType">
<a href="#configuration-categoryAxis.title.border.dashType">categoryAxis.title.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.</p>

<h3 id="configuration-categoryAxis.title.border.width">
<a href="#configuration-categoryAxis.title.border.width">categoryAxis.title.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-categoryAxis.title.color">
<a href="#configuration-categoryAxis.title.color">categoryAxis.title.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the title. Any valid CSS color string will work here, including hex and rgb.</p>

<h3 id="configuration-categoryAxis.title.font">
<a href="#configuration-categoryAxis.title.font">categoryAxis.title.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "16px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The font style of the title.</p>

<h3 id="configuration-categoryAxis.title.margin">
<a href="#configuration-categoryAxis.title.margin">categoryAxis.title.margin </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a><em>(default: 5)</em>
</h3>

<p>The margin of the title.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    $("#chart").kendoChart({
        categoryAxis: {
            title: {
                // sets the top, right, bottom and left margin to 3px.
                margin: 3
            }
        },
        //...
    });

    $("#chart").kendoChart({
        categoryAxis: {
            title: {
                // sets the top and left margin to 1px
                // margin right and bottom are with 0px (by default)
                margin: { top: 1, left: 1 }
            }
        },
        //...
    });
</code></pre>

<h3 id="configuration-categoryAxis.title.position">
<a href="#configuration-categoryAxis.title.position">categoryAxis.title.position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "center")</em>
</h3>

<p>The position of the title.</p>

<h4><em>"top"</em></h4>

<p>The axis title is positioned on the top (applicable to vertical axis)</p>

<h4><em>"bottom"</em></h4>

<p>The axis title is positioned on the bottom (applicable to vertical axis)</p>

<h4><em>"left"</em></h4>

<p>The axis title is positioned on the left (applicable to horizontal axis)</p>

<h4><em>"right"</em></h4>

<p>The axis title is positioned on the right (applicable to horizontal axis)</p>

<h4><em>"center"</em></h4>

<p>The axis title is positioned in the center</p>

<h3 id="configuration-categoryAxis.title.rotation">
<a href="#configuration-categoryAxis.title.rotation">categoryAxis.title.rotation </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The rotation angle of the title.</p>

<h3 id="configuration-categoryAxis.title.text">
<a href="#configuration-categoryAxis.title.text">categoryAxis.title.text </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text of the title.</p>

<h3 id="configuration-categoryAxis.title.visible">
<a href="#configuration-categoryAxis.title.visible">categoryAxis.title.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: true)</em>
</h3>

<p>The visibility of the title.</p>

<h3 id="configuration-categoryAxis.type">
<a href="#configuration-categoryAxis.type">categoryAxis.type </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "category")</em>
</h3>

<p>The axis type.</p>

<h4><em>"category"</em></h4>

<p>Discrete category axis.</p>

<h4><em>"date"</em></h4>

<p>Specialized axis for displaying chronological data.</p>

<h3 id="configuration-categoryAxis.autoBaseUnitSteps">
<a href="#configuration-categoryAxis.autoBaseUnitSteps">categoryAxis.autoBaseUnitSteps </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The discrete <a href="#configuration-categoryAxis.baseUnitStep">categoryAxis.baseUnitStep</a> values when
either <a href="#configuration-categoryAxis.baseUnit">categoryAxis.baseUnit</a> is set to "fit" or
<a href="#configuration-categoryAxis.baseUnitStep">categoryAxis.baseUnitStep</a> is set to "auto".</p>

<h4>Example - set category axis auto base unit steps</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
    categoryAxis: {
        categories: [
            new Date("2012/02/01 00:00:00"),
            new Date("2012/02/02 00:00:00"),
            new Date("2012/02/20 00:00:00")
        ],
        baseUnitStep: "auto",
        autoBaseUnitSteps: {
            days: [3]
        }
    }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.autoBaseUnitSteps.days">
<a href="#configuration-categoryAxis.autoBaseUnitSteps.days">categoryAxis.autoBaseUnitSteps.days </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a> <em>(default: [1, 2, 3])</em>
</h3>

<p>The days unit steps.</p>

<h3 id="configuration-categoryAxis.autoBaseUnitSteps.hours">
<a href="#configuration-categoryAxis.autoBaseUnitSteps.hours">categoryAxis.autoBaseUnitSteps.hours </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a> <em>(default: [1, 2, 3])</em>
</h3>

<p>The hours unit steps.</p>

<h3 id="configuration-categoryAxis.autoBaseUnitSteps.minutes">
<a href="#configuration-categoryAxis.autoBaseUnitSteps.minutes">categoryAxis.autoBaseUnitSteps.minutes </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a> <em>(default: [1, 2, 5, 15, 30])</em>
</h3>

<p>The minutes unit steps.</p>

<h3 id="configuration-categoryAxis.autoBaseUnitSteps.months">
<a href="#configuration-categoryAxis.autoBaseUnitSteps.months">categoryAxis.autoBaseUnitSteps.months </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a> <em>(default: [1, 2, 3, 6])</em>
</h3>

<p>The months unit steps.</p>

<h3 id="configuration-categoryAxis.autoBaseUnitSteps.weeks">
<a href="#configuration-categoryAxis.autoBaseUnitSteps.weeks">categoryAxis.autoBaseUnitSteps.weeks </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a> <em>(default: [1, 2])</em>
</h3>

<p>The weeks unit steps.</p>

<h3 id="configuration-categoryAxis.autoBaseUnitSteps.years">
<a href="#configuration-categoryAxis.autoBaseUnitSteps.years">categoryAxis.autoBaseUnitSteps.years </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a> <em>(default: [1, 2, 3, 5, 10, 25, 50])</em>
</h3>

<p>The years unit steps.</p>

<h3 id="configuration-categoryAxis.background">
<a href="#configuration-categoryAxis.background">categoryAxis.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the axis.</p>

<h3 id="configuration-categoryAxis.baseUnit">
<a href="#configuration-categoryAxis.baseUnit">categoryAxis.baseUnit </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The base time interval for the date axis. The default base unit is determined automatically from the minimum difference
between subsequent categories.</p>

<p>The supported values are:</p>

<ul>
<li>"days"</li>
<li>"fit"</li>
<li>"hours"</li>
<li>"minutes"</li>
<li>"months"</li>
<li>"weeks"</li>
<li>"years"</li>
</ul>

<p>Setting <code>baseUnit</code> to "fit" will set such base unit and <a href="#configuration-categoryAxis.baseUnitStep">categoryAxis.baseUnitStep</a>
that the total number of categories does not exceed <a href="#configuration-categoryAxis.maxDateGroups">categoryAxis.maxDateGroups</a>.</p>

<p>Series data is aggregated for the specified base unit using the <a href="#configuration-series.aggregate">series.aggregate</a> function.</p>

<h3 id="configuration-categoryAxis.baseUnitStep">
<a href="#configuration-categoryAxis.baseUnitStep">categoryAxis.baseUnitStep </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> <em>(default: 1)</em>
</h3>

<p>The step (interval) between categories in base units. Setting it to "auto" will set the step to such value
that the total number of categories does not exceed <a href="#configuration-categoryAxis.maxDateGroups">categoryAxis.maxDateGroups</a>.</p>

<p>This option is ignored if <a href="#configuration-categoryAxis.baseUnit">categoryAxis.baseUnit</a> is set to "fit".</p>

<h3 id="configuration-categoryAxis.labels.culture">
<a href="#configuration-categoryAxis.labels.culture">categoryAxis.labels.culture </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>Culture to use for formatting the dates. See <a href="/framework/globalization/overview">Globalization</a> for more information.
It defaults to the global culture.</p>

<h3 id="configuration-categoryAxis.labels.dateFormats">
<a href="#configuration-categoryAxis.labels.dateFormats">categoryAxis.labels.dateFormats </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Date format strings</p>

<h4><em>"hours"</em></h4>

<p>"HH:mm"</p>

<h4><em>"days"</em></h4>

<p>"M/d"</p>

<h4><em>"weeks"</em></h4>

<p>"M/d"</p>

<h4><em>"months"</em></h4>

<p>"MMM 'yy"</p>

<h4><em>"years"</em></h4>

<p>"yyyy"</p>

<p>The Chart will choose the appropriate format for the current <code>baseUnit</code>.
Setting the labels <strong>format</strong> option will override these defaults.</p>

<h3 id="configuration-categoryAxis.max">
<a href="#configuration-categoryAxis.max">categoryAxis.max </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The last date displayed on the axis.
By default, the minimum date is the same as the last category.
This is often used in combination with the <strong>min</strong> and <strong>roundToBaseUnit</strong> configuration options to
set up a fixed date range.</p>

<h3 id="configuration-categoryAxis.min">
<a href="#configuration-categoryAxis.min">categoryAxis.min </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The first date displayed on the axis.
By default, the minimum date is the same as the first category.
This is often used in combination with the <strong>max</strong> and <strong>roundToBaseUnit</strong> configuration options to
set up a fixed date range.</p>

<h3 id="configuration-categoryAxis.roundToBaseUnit">
<a href="#configuration-categoryAxis.roundToBaseUnit">categoryAxis.roundToBaseUnit </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: true)</em>
</h3>

<p>By default, the first and last dates will be rounded off to the nearest base unit.
Specifying <strong>false</strong> for this option will disable this behavior.</p>

<p>This option is most useful in combination with explicit <strong>min</strong> and <strong>max</strong> dates.</p>

<p>It will be ignored if either column, ohlc or candlestick series are plotted on the axis.</p>

<h3 id="configuration-categoryAxis.weekStartDay">
<a href="#configuration-categoryAxis.weekStartDay">categoryAxis.weekStartDay </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: kendo.days.Sunday)</em>
</h3>

<p>Specifies the week start day when <strong>baseUnit</strong> is set to "weeks".
Use the <em>kendo.days</em> constants to specify the day by name.</p>

<ul>
<li>kendo.days.Sunday (0)</li>
<li>kendo.days.Monday (1)</li>
<li>kendo.days.Tuesday (2)</li>
<li>kendo.days.Wednesday (3)</li>
<li>kendo.days.Thursday (4)</li>
<li>kendo.days.Friday (5)</li>
<li>kendo.days.Saturday (6)</li>
</ul>

<h3 id="configuration-categoryAxis.maxDateGroups">
<a href="#configuration-categoryAxis.maxDateGroups">categoryAxis.maxDateGroups </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>Specifies the maximum number of groups (categories) to produce when
either <strong>baseUnit</strong> is set to "fit" or <strong>baseUnitStep</strong> is set to "auto".</p>

<p>This option is ignored in all other cases.</p>

<p>The default value is approximately equal to <code>[widget width, px] / 30</code></p>

<h3 id="configuration-categoryAxis.visible">
<a href="#configuration-categoryAxis.visible">categoryAxis.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: true)</em>
</h3>

<p>The visibility of the axis.</p>

<h3 id="configuration-categoryAxis.crosshair">
<a href="#configuration-categoryAxis.crosshair">categoryAxis.crosshair </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The crosshair configuration options.</p>

<h3 id="configuration-categoryAxis.crosshair.color">
<a href="#configuration-categoryAxis.crosshair.color">categoryAxis.crosshair.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The color of the crosshair.</p>

<h3 id="configuration-categoryAxis.crosshair.width">
<a href="#configuration-categoryAxis.crosshair.width">categoryAxis.crosshair.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The width of the crosshair.</p>

<h3 id="configuration-categoryAxis.crosshair.opacity">
<a href="#configuration-categoryAxis.crosshair.opacity">categoryAxis.crosshair.opacity </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The opacity of the crosshair.</p>

<h3 id="configuration-categoryAxis.crosshair.dashType">
<a href="#configuration-categoryAxis.crosshair.dashType">categoryAxis.crosshair.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The dash type of the crosshair.</p>

<h3 id="configuration-categoryAxis.crosshair.visible">
<a href="#configuration-categoryAxis.crosshair.visible">categoryAxis.crosshair.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>The dash type of the crosshair.</p>

<h3 id="configuration-categoryAxis.crosshair.tooltip">
<a href="#configuration-categoryAxis.crosshair.tooltip">categoryAxis.crosshair.tooltip </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The crosshair tooltip configuration options.</p>

<h3 id="configuration-categoryAxis.crosshair.tooltip.background">
<a href="#configuration-categoryAxis.crosshair.tooltip.background">categoryAxis.crosshair.tooltip.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the tooltip.</p>

<h3 id="configuration-categoryAxis.crosshair.tooltip.border">
<a href="#configuration-categoryAxis.crosshair.tooltip.border">categoryAxis.crosshair.tooltip.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border configuration options.</p>

<h3 id="configuration-categoryAxis.crosshair.tooltip.border.color">
<a href="#configuration-categoryAxis.crosshair.tooltip.border.color">categoryAxis.crosshair.tooltip.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border.</p>

<h3 id="configuration-categoryAxis.crosshair.tooltip.border.width">
<a href="#configuration-categoryAxis.crosshair.tooltip.border.width">categoryAxis.crosshair.tooltip.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-categoryAxis.crosshair.tooltip.color">
<a href="#configuration-categoryAxis.crosshair.tooltip.color">categoryAxis.crosshair.tooltip.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the tooltip.</p>

<h3 id="configuration-categoryAxis.crosshair.tooltip.font">
<a href="#configuration-categoryAxis.crosshair.tooltip.font">categoryAxis.crosshair.tooltip.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "12px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The tooltip font.</p>

<h3 id="configuration-categoryAxis.crosshair.tooltip.format">
<a href="#configuration-categoryAxis.crosshair.tooltip.format">categoryAxis.crosshair.tooltip.format </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The tooltip format.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    //sets format of the tooltip
    format: "C"
</code></pre>

<h3 id="configuration-categoryAxis.crosshair.tooltip.padding">
<a href="#configuration-categoryAxis.crosshair.tooltip.padding">categoryAxis.crosshair.tooltip.padding </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The padding of the tooltip.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    // sets the top, right, bottom and left padding to 3px.
    padding: 3

    // sets the top and left padding to 1px
    // right and bottom padding are left at their default values
    padding: { top: 1, left: 1 }
</code></pre>

<h3 id="configuration-categoryAxis.crosshair.tooltip.template">
<a href="#configuration-categoryAxis.crosshair.tooltip.template">categoryAxis.crosshair.tooltip.template </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The tooltip template.
Template variables:</p>

<ul>
<li>  <strong>value</strong> - the point value (either a number or an object)</li>
</ul>

<h4>Example</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
     title: {
         text: "My Chart Title"
     },
     series: [{
         type: "area",
         name: "Series 1",
         data: [200, 450, 300, 125]
     }],
     categoryAxis: {
         categories: [2000, 2001, 2002, 2003],
         crosshair: {
             visible: true,
             tooltip: {
                 visible: true,
                 template: "|#= value #|"
             }
         }
     }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.crosshair.tooltip.visible">
<a href="#configuration-categoryAxis.crosshair.tooltip.visible">categoryAxis.crosshair.tooltip.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>A value indicating if the tooltip should be displayed.</p>

<h3 id="configuration-categoryAxis.notes">
<a href="#configuration-categoryAxis.notes">categoryAxis.notes </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The category axis notes configuration.</p>

<h3 id="configuration-categoryAxis.notes.position">
<a href="#configuration-categoryAxis.notes.position">categoryAxis.notes.position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The position of the category axis note.</p>

<ul>
<li>"top" - The note is positioned on the top.</li>
<li>"bottom" - The note is positioned on the bottom.</li>
<li>"left" - The note is positioned on the left.</li>
<li>"right" - The note is positioned on the right.</li>
</ul>

<h3 id="configuration-categoryAxis.notes.icon">
<a href="#configuration-categoryAxis.notes.icon">categoryAxis.notes.icon </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The icon of the notes.</p>

<h3 id="configuration-categoryAxis.notes.icon.background">
<a href="#configuration-categoryAxis.notes.icon.background">categoryAxis.notes.icon.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the notes icon.</p>

<h4>Example - set the category axis notes icon background</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      icon: {
        background: "red"
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.icon.border">
<a href="#configuration-categoryAxis.notes.icon.border">categoryAxis.notes.icon.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the icon.</p>

<h4>Example - set the category axis notes icon border</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      icon: {
        border: {
          width: 2,
          color: "red"
        }
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.icon.border.color">
<a href="#configuration-categoryAxis.notes.icon.border.color">categoryAxis.notes.icon.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The border color of the icon.</p>

<h4>Example - set the category axis notes icon border color</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      icon: {
        border: {
          width: 2,
          color: "red"
        }
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.icon.border.width">
<a href="#configuration-categoryAxis.notes.icon.border.width">categoryAxis.notes.icon.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The border width of the icon.</p>

<h4>Example - set the category axis notes icon border width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      icon: {
        border: {
          width: 2,
          color: "red"
        }
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.icon.size">
<a href="#configuration-categoryAxis.notes.icon.size">categoryAxis.notes.icon.size </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The size of the icon.</p>

<h4>Example - set the category axis notes icon size</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      icon: {
        size: 30
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.icon.type">
<a href="#configuration-categoryAxis.notes.icon.type">categoryAxis.notes.icon.type </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "circle")</em>
</h3>

<p>The icon shape.</p>

<p>The supported values are:</p>

<ul>
<li>"circle" - the marker shape is circle.</li>
<li>"square" - the marker shape is square.</li>
<li>"triangle" - the marker shape is triangle.</li>
<li>"cross" - the marker shape is cross.</li>
</ul>

<h4>Example - set the category axis notes icon shape</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      icon: {
        shape: "triangle"
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.icon.visible">
<a href="#configuration-categoryAxis.notes.icon.visible">categoryAxis.notes.icon.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: "true")</em>
</h3>

<p>The icon visibility.</p>

<h4>Example - set the category axis notes icon visibility</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      icon: {
        visible: false
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.label">
<a href="#configuration-categoryAxis.notes.label">categoryAxis.notes.label </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The label of the notes.</p>

<h3 id="configuration-categoryAxis.notes.label.background">
<a href="#configuration-categoryAxis.notes.label.background">categoryAxis.notes.label.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the label. Accepts a valid CSS color string, including hex and rgb.</p>

<h4>Example - set the category axis label background</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      label: {
        background: "red"
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.label.border">
<a href="#configuration-categoryAxis.notes.label.border">categoryAxis.notes.label.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the label.</p>

<h4>Example - set the category axis label border</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      label: {
        border: {
          color: "green",
          dashType: "dashDot",
          width: 1
        }
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.label.border.color">
<a href="#configuration-categoryAxis.notes.label.border.color">categoryAxis.notes.label.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "black")</em>
</h3>

<p>The color of the border. Accepts a valid CSS color string, including hex and rgb.</p>

<h4>Example - set the category axis label border color</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      label: {
        border: {
          color: "green"
        }
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.label.border.dashType">
<a href="#configuration-categoryAxis.notes.label.border.dashType">categoryAxis.notes.label.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<p>The following dash types are supported:</p>

<ul>
<li>"dash" - a line consisting of dashes</li>
<li>"dashDot" - a line consisting of a repeating pattern of dash-dot</li>
<li>"dot" - a line consisting of dots</li>
<li>"longDash" - a line consisting of a repeating pattern of long-dash</li>
<li>"longDashDot" - a line consisting of a repeating pattern of long-dash-dot</li>
<li>"longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot</li>
<li>"solid" - a solid line</li>
</ul>

<h4>Example - set the category axis label border dash type</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      label: {
        border: {
          dashType: "dashDot",
          width: 1
        }
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.label.border.width">
<a href="#configuration-categoryAxis.notes.label.border.width">categoryAxis.notes.label.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.</p>

<h4>Example - set the category axis label border width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      label: {
        border: {
          width: 1
        }
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.label.color">
<a href="#configuration-categoryAxis.notes.label.color">categoryAxis.notes.label.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the label. Accepts a valid CSS color string, including hex and rgb.</p>

<h4>Example - set the category axis label color as a hex string</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      label: {
        color: "#aa00bb"
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.label.font">
<a href="#configuration-categoryAxis.notes.label.font">categoryAxis.notes.label.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "12px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The font style of the label.</p>

<h4>Example - set the chart series label font</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      label: {
        font: "20px sans-serif"
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.label.template">
<a href="#configuration-categoryAxis.notes.label.template">categoryAxis.notes.label.template </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The <a href="/api/framework/kendo#methods-template">template</a> which renders the labels.</p>

<p>The fields which can be used in the template are:</p>

<ul>
<li>value - the category value</li>
</ul>

<h4>Example - set the category axis notes label template as a string</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      label: {
        template: "Year: #: value #"
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.label.visible">
<a href="#configuration-categoryAxis.notes.label.visible">categoryAxis.notes.label.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: true)</em>
</h3>

<p>If set to <code>true</code> the chart will display the category notes label. By default the category notes label are visible.</p>

<h4>Example - hide the category axis notes label</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      label: {
        visible: false
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.label.rotation">
<a href="#configuration-categoryAxis.notes.label.rotation">categoryAxis.notes.label.rotation </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The rotation angle of the label. By default the label are not rotated.</p>

<h4>Example - rotate the category axis notes label</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      label: {
        rotation: 90
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.label.format">
<a href="#configuration-categoryAxis.notes.label.format">categoryAxis.notes.label.format </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "{0}")</em>
</h3>

<p>The format used to display the notes label. Uses <a href="/api/framework/kendo#methods-format">kendo.format</a>. Contains one placeholder ("{0}") which represents the category value.</p>

<h4>Example - set the category axis notes label format</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      label: {
        format: "Category slot: {0}"
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.label.position">
<a href="#configuration-categoryAxis.notes.label.position">categoryAxis.notes.label.position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "inside")</em>
</h3>

<p>The position of the labels.</p>

<ul>
<li>"inside" - the label is positioned inside of the icon.</li>
<li>"outside" - the label is positioned outside of the icon.</li>
</ul>

<h3 id="configuration-categoryAxis.notes.line">
<a href="#configuration-categoryAxis.notes.line">categoryAxis.notes.line </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The line of the notes.</p>

<h3 id="configuration-categoryAxis.notes.line.width">
<a href="#configuration-categoryAxis.notes.line.width">categoryAxis.notes.line.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The line width of the notes.</p>

<h4>Example - set the category axis notes line width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      line: {
        width: 4
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.line.color">
<a href="#configuration-categoryAxis.notes.line.color">categoryAxis.notes.line.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The line color of the notes.</p>

<h4>Example - set the category axis notes color width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      line: {
        color: "#aa00bb"
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.line.length">
<a href="#configuration-categoryAxis.notes.line.length">categoryAxis.notes.line.length </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The length of the connecting lines in pixels.</p>

<h4>Example - set the category axis notes color width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      line: {
        length: 20
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data">
<a href="#configuration-categoryAxis.notes.data">categoryAxis.notes.data </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>The items of the notes.</p>

<h3 id="configuration-categoryAxis.notes.data.value">
<a href="#configuration-categoryAxis.notes.data.value">categoryAxis.notes.data.value </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The value of the note.</p>

<h3 id="configuration-categoryAxis.notes.data.position">
<a href="#configuration-categoryAxis.notes.data.position">categoryAxis.notes.data.position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The position of the category axis note.</p>

<ul>
<li>"top" - The note is positioned on the top.</li>
<li>"bottom" - The note is positioned on the bottom.</li>
<li>"left" - The note is positioned on the left.</li>
<li>"right" - The note is positioned on the right.</li>
</ul>

<h3 id="configuration-categoryAxis.notes.data.icon">
<a href="#configuration-categoryAxis.notes.data.icon">categoryAxis.notes.data.icon </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The icon of the note.</p>

<h3 id="configuration-categoryAxis.notes.data.icon.background">
<a href="#configuration-categoryAxis.notes.data.icon.background">categoryAxis.notes.data.icon.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the note icon.</p>

<h4>Example - set the category axis note icon background</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          background: "red"
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.icon.border">
<a href="#configuration-categoryAxis.notes.data.icon.border">categoryAxis.notes.data.icon.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the icon.</p>

<h4>Example - set the category axis note icon border</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          border: {
            width: 2,
            color: "red"
          }
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.icon.border.color">
<a href="#configuration-categoryAxis.notes.data.icon.border.color">categoryAxis.notes.data.icon.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The border color of the icon.</p>

<h4>Example - set the category axis note icon border color</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          border: {
            width: 2,
            color: "red"
          }
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.icon.border.width">
<a href="#configuration-categoryAxis.notes.data.icon.border.width">categoryAxis.notes.data.icon.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The border width of the icon.</p>

<h4>Example - set the category axis note icon border width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          border: {
            width: 2,
            color: "red"
          }
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.icon.size">
<a href="#configuration-categoryAxis.notes.data.icon.size">categoryAxis.notes.data.icon.size </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The size of the icon.</p>

<h4>Example - set the category axis note icon size</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          size: 30
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.icon.type">
<a href="#configuration-categoryAxis.notes.data.icon.type">categoryAxis.notes.data.icon.type </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "circle")</em>
</h3>

<p>The icon shape.</p>

<p>The supported values are:</p>

<ul>
<li>"circle" - the marker shape is circle.</li>
<li>"square" - the marker shape is square.</li>
<li>"triangle" - the marker shape is triangle.</li>
<li>"cross" - the marker shape is cross.</li>
</ul>

<h4>Example - set the category axis note icon shape</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          shape: "triangle"
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.icon.visible">
<a href="#configuration-categoryAxis.notes.data.icon.visible">categoryAxis.notes.data.icon.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: "true")</em>
</h3>

<p>The icon visibility.</p>

<h4>Example - set the category axis note icon visibility</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          visible: false
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.label">
<a href="#configuration-categoryAxis.notes.data.label">categoryAxis.notes.data.label </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The label of the note.</p>

<h3 id="configuration-categoryAxis.notes.data.label.background">
<a href="#configuration-categoryAxis.notes.data.label.background">categoryAxis.notes.data.label.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the label. Accepts a valid CSS color string, including hex and rgb.</p>

<h4>Example - set the category axis note label background</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notesdata {
      data: [{
        value: 1,
        label: {
          background: "red"
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.label.border">
<a href="#configuration-categoryAxis.notes.data.label.border">categoryAxis.notes.data.label.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the label.</p>

<h4>Example - set the category axis note label border</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          border: {
            color: "green",
            dashType: "dashDot",
            width: 1
          }
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.label.border.color">
<a href="#configuration-categoryAxis.notes.data.label.border.color">categoryAxis.notes.data.label.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "black")</em>
</h3>

<p>The color of the border. Accepts a valid CSS color string, including hex and rgb.</p>

<h4>Example - set the category axis note label border color</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          border: {
            color: "green"
          }
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.label.border.dashType">
<a href="#configuration-categoryAxis.notes.data.label.border.dashType">categoryAxis.notes.data.label.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<p>The following dash types are supported:</p>

<ul>
<li>"dash" - a line consisting of dashes</li>
<li>"dashDot" - a line consisting of a repeating pattern of dash-dot</li>
<li>"dot" - a line consisting of dots</li>
<li>"longDash" - a line consisting of a repeating pattern of long-dash</li>
<li>"longDashDot" - a line consisting of a repeating pattern of long-dash-dot</li>
<li>"longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot</li>
<li>"solid" - a solid line</li>
</ul>

<h4>Example - set the category axis note label border dash type</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          border: {
            dashType: "dashDot",
            width: 1
          }
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.label.border.width">
<a href="#configuration-categoryAxis.notes.data.label.border.width">categoryAxis.notes.data.label.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.</p>

<h4>Example - set the category axis note label border width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          border: {
            width: 1
          }
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.label.color">
<a href="#configuration-categoryAxis.notes.data.label.color">categoryAxis.notes.data.label.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the note label. Accepts a valid CSS color string, including hex and rgb.</p>

<h4>Example - set the category axis note label color as a hex string</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          color: "#aa00bb"
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.label.font">
<a href="#configuration-categoryAxis.notes.data.label.font">categoryAxis.notes.data.label.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "12px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The font style of the note label.</p>

<h4>Example - set the category axis note label font</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          font: "20px sans-serif"
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.label.template">
<a href="#configuration-categoryAxis.notes.data.label.template">categoryAxis.notes.data.label.template </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The <a href="/api/framework/kendo#methods-template">template</a> which renders the labels.</p>

<p>The fields which can be used in the template are:</p>

<ul>
<li>value - the category value</li>
</ul>

<h4>Example - set the category axis note label template as a string</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          template: "Year: #: value #"
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.label.visible">
<a href="#configuration-categoryAxis.notes.data.label.visible">categoryAxis.notes.data.label.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: true)</em>
</h3>

<p>If set to <code>true</code> the chart will display the category notes label. By default the category notes label are visible.</p>

<h4>Example - hide the category axis note label</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          visible: false
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.label.rotation">
<a href="#configuration-categoryAxis.notes.data.label.rotation">categoryAxis.notes.data.label.rotation </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The rotation angle of the label. By default the label are not rotated.</p>

<h4>Example - rotate the category axis note label</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          rotation: 90
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.label.format">
<a href="#configuration-categoryAxis.notes.data.label.format">categoryAxis.notes.data.label.format </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "{0}")</em>
</h3>

<p>The format used to display the note label. Uses <a href="/api/framework/kendo#methods-format">kendo.format</a>. Contains one placeholder ("{0}") which represents the category value.</p>

<h4>Example - set the category axis note label format</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          format: "Category slot: {0}"
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.label.text">
<a href="#configuration-categoryAxis.notes.data.label.text">categoryAxis.notes.data.label.text </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The label note text.</p>

<h4>Example - set the category axis label note text</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          text: "A"
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.label.position">
<a href="#configuration-categoryAxis.notes.data.label.position">categoryAxis.notes.data.label.position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "inside")</em>
</h3>

<p>The position of the category axis note label.</p>

<ul>
<li>"inside" - the label is positioned inside of the icon.</li>
<li>"outside" - the label is positioned outside of the icon.</li>
</ul>

<h3 id="configuration-categoryAxis.notes.data.line">
<a href="#configuration-categoryAxis.notes.data.line">categoryAxis.notes.data.line </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The line of the note.</p>

<h3 id="configuration-categoryAxis.notes.data.line.width">
<a href="#configuration-categoryAxis.notes.data.line.width">categoryAxis.notes.data.line.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The line width of the note.</p>

<h4>Example - set the category axis note line width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        line: {
          width: 4
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.line.color">
<a href="#configuration-categoryAxis.notes.data.line.color">categoryAxis.notes.data.line.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The line color of the note.</p>

<h4>Example - set the category axis note color width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        line: {
          color: "#aa00bb"
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.line.length">
<a href="#configuration-categoryAxis.notes.data.line.length">categoryAxis.notes.data.line.length </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The length of the connecting lines in pixels.</p>

<h4>Example - set the category axis note color width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        line: {
          length: 20
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-chartArea">
<a href="#configuration-chartArea">chartArea </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The chart area configuration options.
This is the entire visible area of the chart.</p>

<h3 id="configuration-chartArea.background">
<a href="#configuration-chartArea.background">chartArea.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "white")</em>
</h3>

<p>The background color of the chart area.</p>

<h3 id="configuration-chartArea.opacity">
<a href="#configuration-chartArea.opacity">chartArea.opacity </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 1)</em>
</h3>

<p>The background opacity of the chart area.</p>

<h3 id="configuration-chartArea.border">
<a href="#configuration-chartArea.border">chartArea.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the chart area.</p>

<h3 id="configuration-chartArea.border.color">
<a href="#configuration-chartArea.border.color">chartArea.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border.</p>

<h3 id="configuration-chartArea.border.dashType">
<a href="#configuration-chartArea.border.dashType">chartArea.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.</p>

<h3 id="configuration-chartArea.border.width">
<a href="#configuration-chartArea.border.width">chartArea.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-chartArea.height">
<a href="#configuration-chartArea.height">chartArea.height </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 400)</em>
</h3>

<p>The height of the chart area.</p>

<h3 id="configuration-chartArea.margin">
<a href="#configuration-chartArea.margin">chartArea.margin </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a><em>(default: 5)</em>
</h3>

<p>The margin of the chart area.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    // sets the top, right, bottom and left margin to 3px.
    margin: 3

    // sets the top and left margin to 1px
    // margin right and bottom are with 5px (by default)
    margin: { top: 1, left: 1 }
</code></pre>

<h3 id="configuration-chartArea.width">
<a href="#configuration-chartArea.width">chartArea.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 600)</em>
</h3>

<p>The width of the chart area.</p>

<h3 id="configuration-dataSource">
<a href="#configuration-dataSource">dataSource </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>DataSource configuration or instance.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    $("#chart").kendoChart({
        dataSource: {
            transport: {
                 read: "spain-electricity.json"
            }
        },
        series: [{
            field: "value"
        }],
        categoryAxis: {
            field: "year"
        }
    });

    // Alternative configuration
    var dataSource = new kendo.data.DataSource({
        transport: {
             read: "spain-electricity.json"
        }
    });

    $("#chart").kendoChart({
        dataSource: dataSource,
        series: [{
            field: "value"
        }],
        categoryAxis: {
            field: "year"
        }
    });
</code></pre>

<h3 id="configuration-autoBind">
<a href="#configuration-autoBind">autoBind </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: true)</em>
</h3>

<p>Indicates whether the chart will call read on the data source initially.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    $("#stock-chart").kendoStockChart({
        dataSource: chartDataSource,
        chartBind: false
    });

    // ...
    naviDataSource.read();
</code></pre>

<h3 id="configuration-legend">
<a href="#configuration-legend">legend </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The chart legend configuration options.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    $("#chart").kendoChart({
        legend: {
            // set the background color to a dark blue
            background: "#336699",
            labels: {
                // set the font to a size of 14px
                font: "14px Arial,Helvetica,sans-serif",
                // set the color to red
                color: "red"
            },
            // move the legend to the left
            position: "left",
            // move the legend a bit closer to the chart by setting the x offset to 20
            offsetX: 20,
            // move the legend up to the top by setting the y offset to -100
            offsetY: -100,
        }
    });
</code></pre>

<h3 id="configuration-legend.background">
<a href="#configuration-legend.background">legend.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "white")</em>
</h3>

<p>The background color of the legend. Any valid CSS color string will work here, including hex and rgb.</p>

<h3 id="configuration-legend.border">
<a href="#configuration-legend.border">legend.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the legend.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    $("#chart").kendoChart({
        legend: {
            border: {
                // set the border width to 2 pixels
                width: 2,
                // set the color to grey
                color: "grey",
                // set the dash type to solid. this is the default so we could leave this line out.
                dashType: "solid"
            }
        },
        ...
    });
</code></pre>

<h3 id="configuration-legend.border.color">
<a href="#configuration-legend.border.color">legend.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border.</p>

<h3 id="configuration-legend.border.dashType">
<a href="#configuration-legend.border.dashType">legend.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.</p>

<h4>Example</h4>

<h3 id="configuration-legend.border.width">
<a href="#configuration-legend.border.width">legend.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-legend.item">
<a href="#configuration-legend.item">legend.item </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The chart legend item configuration.</p>

<h3 id="configuration-legend.item.cursor">
<a href="#configuration-legend.item.cursor">legend.item.cursor </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/cursor">cursor style</a> of the legend item.</p>

<h3 id="configuration-legend.item.visual">
<a href="#configuration-legend.item.visual">legend.item.visual </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>A function that can be used to create a custom visual for the legend items. The available argument fields are:</p>

<ul>
<li>options - the item options.</li>
<li>createVisual - a function that can be used to get the default visual.</li>
</ul>

<h4>Example - using custom visual for the legend items</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
  $("#chart").kendoStockChart({
    legend: {
      item: {
        visual: function (e) {
          var color = e.options.markers.background;
          var labelColor = e.options.labels.color;
          var rect = new kendo.geometry.Rect([0, 0], [100, 50]);
          var layout = new kendo.drawing.Layout(rect, {
            spacing: 5,
            alignItems: "center"
          });

          var marker = new kendo.drawing.Path({
            fill: {
              color: color
            }
          }).moveTo(10, 0).lineTo(15, 10).lineTo(5, 10).close();

          var label = new kendo.drawing.Text(e.series.name, [0, 0], {
            fill: {
              color: labelColor
            }
          });

          layout.append(marker, label);
          layout.reflow()

          return layout;
        }
      }
    },
    series: [
      { name: "Series 1", data: [1, 2, 3] },
      { name: "Series 2", data: [3, 4, 5] }
    ]
  });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-legend.labels">
<a href="#configuration-legend.labels">legend.labels </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Configures the legend labels.</p>

<h3 id="configuration-legend.labels.color">
<a href="#configuration-legend.labels.color">legend.labels.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the labels.
Any valid CSS color string will work here, including hex and rgb.</p>

<h3 id="configuration-legend.labels.font">
<a href="#configuration-legend.labels.font">legend.labels.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "12px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The font style of the labels.</p>

<h3 id="configuration-legend.labels.template">
<a href="#configuration-legend.labels.template">legend.labels.template </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The <a href="/api/framework/kendo#methods-template">template</a> which renders the labels.</p>

<p>The fields which can be used in the template are:</p>

<ul>
<li>  text - the text the legend item.</li>
<li>  series - the data series.</li>
<li>  value - the point value. (only for donut and pie charts)</li>
<li>  percentage - the point value represented as a percentage value. Available only for 100% stacked charts.</li>
<li>  dataItem - the original data item used to construct the point.</li>
</ul>

<h3 id="configuration-legend.margin">
<a href="#configuration-legend.margin">legend.margin </a><code>Number  |</code><code> Object</code><em>(default: 10)</em>
</h3>

<p>The margin of the legend.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    $("#chart").kendoChart({
        legend: {
            // sets the top, right, bottom and left margin to 3px.
            margin: 3
        },
        //...
    });
    //
    $("#chart").kendoChart({
        legend: {
            // sets the top and left margin to 1px
            // margin right and bottom are with 10px (by default)
            margin: { top: 1, left: 1 }
        },
        //...
    });
</code></pre>

<h3 id="configuration-legend.offsetX">
<a href="#configuration-legend.offsetX">legend.offsetX </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The X offset from its position.  The offset is relative to the current position of the legend.
For instance, a value of 20 will move the legend 20 pixels to the right of it's initial position.  A negative value will move the legend
to the left of the current position.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    $("#chart").kendoChart({
        legend: {
            // move the legend to the left side of the chart
            offsetX: 20
        },
        ...
    });
</code></pre>

<h3 id="configuration-legend.offsetY">
<a href="#configuration-legend.offsetY">legend.offsetY </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The Y offset from its position.  The offset is relative to the current position of the legend.
For instance, a value of 20 will move the legend 20 pixels down from it's initial position.  A negative value will move the legend
upwards from the current position.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    $("#chart").kendoChart({
        legend: {
            // move the legend up 100 pixels
            offsetY: -100
        },
        ...
    });
</code></pre>

<h3 id="configuration-legend.padding">
<a href="#configuration-legend.padding">legend.padding </a><code>Number  |</code><code> Object</code><em>(default: 5)</em>
</h3>

<p>The padding of the legend.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    // sets the top, right, bottom and left padding to 3px.
    $("#chart").kendoChart({
        legend: {
            // sets the top, right, bottom and left padding to 3px.
            padding: 3
        },
        ...
    });
    //
    $("#chart").kendoChart({
        legend: {
           // sets the top and left padding to 1px
           // padding right and bottom are with 5px (by default)
           padding: { top: 1, left: 1 }
        },
        ...
    });
</code></pre>

<h3 id="configuration-legend.position">
<a href="#configuration-legend.position">legend.position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "right")</em>
</h3>

<p>The positions of the legend.</p>

<h4><em>"top"</em></h4>

<p>The legend is positioned on the top.</p>

<h4><em>"bottom"</em></h4>

<p>The legend is positioned on the bottom.</p>

<h4><em>"left"</em></h4>

<p>The legend is positioned on the left.</p>

<h4><em>"right"</em></h4>

<p>The legend is positioned on the right.</p>

<h4><em>"custom"</em></h4>

<p>The legend is positioned using OffsetX and OffsetY.</p>

<h3 id="configuration-legend.reverse">
<a href="#configuration-legend.reverse">legend.reverse </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: false)</em>
</h3>

<p>If set to <code>true</code> the legend items will be reversed.</p>

<p>Available in versions 2013.3.1306 and later.</p>

<h3 id="configuration-legend.visible">
<a href="#configuration-legend.visible">legend.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>The visibility of the legend.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    $("#chart").kendoChart({
        legend: {
            // show the legend
            visible: true
        },
        ...
    });
</code></pre>

<h3 id="configuration-legend.inactiveItems">
<a href="#configuration-legend.inactiveItems">legend.inactiveItems </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Configures the legend inactive items.</p>

<h3 id="configuration-legend.inactiveItems.labels">
<a href="#configuration-legend.inactiveItems.labels">legend.inactiveItems.labels </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Configures the legend labels.</p>

<h3 id="configuration-legend.inactiveItems.labels.color">
<a href="#configuration-legend.inactiveItems.labels.color">legend.inactiveItems.labels.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "black")</em>
</h3>

<p>The color of the labels.
Any valid CSS color string will work here, including hex and rgb.</p>

<h3 id="configuration-legend.inactiveItems.labels.font">
<a href="#configuration-legend.inactiveItems.labels.font">legend.inactiveItems.labels.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "12px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The font style of the labels.</p>

<h3 id="configuration-legend.inactiveItems.labels.template">
<a href="#configuration-legend.inactiveItems.labels.template">legend.inactiveItems.labels.template </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The <a href="/api/framework/kendo#methods-template">template</a> which renders the labels.</p>

<p>The fields which can be used in the template are:</p>

<ul>
<li>  text - the text the legend item.</li>
<li>  series - the data series.</li>
<li>  value - the point value. (only for donut and pie charts)</li>
<li>  percentage - the point value represented as a percentage value. Available only for 100% stacked charts.</li>
<li>  dataItem - the original data item used to construct the point.</li>
</ul>

<h3 id="configuration-legend.inactiveItems.markers">
<a href="#configuration-legend.inactiveItems.markers">legend.inactiveItems.markers </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Configures the legend markers.</p>

<h3 id="configuration-legend.inactiveItems.markers.color">
<a href="#configuration-legend.inactiveItems.markers.color">legend.inactiveItems.markers.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The color of the markers.
Any valid CSS color string will work here, including hex and rgb.</p>

<h3 id="configuration-panes">
<a href="#configuration-panes">panes </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>The chart panes configuration.</p>

<p>Panes are used to split the chart in two or more parts. The panes are ordered from top to bottom.</p>

<p>Each axis can be associated with a pane by setting its <code>pane</code> option to the name of the desired pane.
Axis that don't have specified pane are placed in the top (default) pane.</p>

<p>Series are moved to the desired pane by associating them with an axis.</p>

<h3 id="configuration-panes.name">
<a href="#configuration-panes.name">panes.name </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The unique pane name.</p>

<h3 id="configuration-panes.margin">
<a href="#configuration-panes.margin">panes.margin </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The margin of the pane.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    // sets the top, right, bottom and left margin to 3px.
    margin: 3

    // sets the top and left margin to 1px
    margin: { top: 1, left: 1 }
</code></pre>

<h3 id="configuration-panes.padding">
<a href="#configuration-panes.padding">panes.padding </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The padding of the pane.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    // sets the top, right, bottom and left padding to 3px.
    padding: 3

    // sets the top and left padding to 1px
    padding: { top: 1, left: 1 }
</code></pre>

<h3 id="configuration-panes.background">
<a href="#configuration-panes.background">panes.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the pane.</p>

<h3 id="configuration-panes.border">
<a href="#configuration-panes.border">panes.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the pane.</p>

<h3 id="configuration-panes.border.color">
<a href="#configuration-panes.border.color">panes.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border.</p>

<h3 id="configuration-panes.border.dashType">
<a href="#configuration-panes.border.dashType">panes.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.</p>

<h3 id="configuration-panes.border.width">
<a href="#configuration-panes.border.width">panes.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-panes.clip">
<a href="#configuration-panes.clip">panes.clip </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a>
</h3>

<p>Specifies whether the charts in the pane should be clipped.</p>

<h3 id="configuration-panes.height">
<a href="#configuration-panes.height">panes.height </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The pane height in pixels.</p>

<h3 id="configuration-panes.title">
<a href="#configuration-panes.title">panes.title </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The pane title text or configuration.</p>

<h3 id="configuration-panes.title.background">
<a href="#configuration-panes.title.background">panes.title.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the title. Any valid CSS color string will work here, including
hex and rgb.</p>

<h3 id="configuration-panes.title.border">
<a href="#configuration-panes.title.border">panes.title.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the title.</p>

<h3 id="configuration-panes.title.border.color">
<a href="#configuration-panes.title.border.color">panes.title.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border. Any valid CSS color string will work here, including
hex and rgb.</p>

<h3 id="configuration-panes.title.border.dashType">
<a href="#configuration-panes.title.border.dashType">panes.title.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.</p>

<h3 id="configuration-panes.title.border.width">
<a href="#configuration-panes.title.border.width">panes.title.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-panes.title.color">
<a href="#configuration-panes.title.color">panes.title.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the title. Any valid CSS color string will work here, including hex and rgb.</p>

<h3 id="configuration-panes.title.font">
<a href="#configuration-panes.title.font">panes.title.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "16px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The font style of the title.</p>

<h3 id="configuration-panes.title.margin">
<a href="#configuration-panes.title.margin">panes.title.margin </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a><em>(default: 5)</em>
</h3>

<p>The margin of the title.</p>

<h3 id="configuration-panes.title.position">
<a href="#configuration-panes.title.position">panes.title.position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "center")</em>
</h3>

<p>The position of the title.</p>

<h4><em>"left"</em></h4>

<p>The pane title is positioned on the left</p>

<h4><em>"right"</em></h4>

<p>The pane title is positioned on the right</p>

<h4><em>"center"</em></h4>

<p>The pane title is positioned in the center</p>

<h3 id="configuration-panes.title.text">
<a href="#configuration-panes.title.text">panes.title.text </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text of the title.</p>

<h3 id="configuration-panes.title.visible">
<a href="#configuration-panes.title.visible">panes.title.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: true)</em>
</h3>

<p>The visibility of the title.</p>

<h3 id="configuration-pdf">
<a href="#configuration-pdf">pdf </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Configures the export settings for the <a href="#methods-saveAsPDF">saveAsPDF</a> method.</p>

<h3 id="configuration-pdf.author">
<a href="#configuration-pdf.author">pdf.author </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: null)</em>
</h3>

<p>The author of the PDF document.</p>

<h4>Example - set the author</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
  $("#stock-chart").kendoStockChart({
      pdf: {
          author: "John Doe"
      },
      series: [{
        type: "line",
        field: "value",
        categoryField: "date",
        data: [
          { value: 1, date: new Date(2012, 1, 1) },
          { value: 2, date: new Date(2012, 1, 2) }
        ]
      }]
  });

  var chart = $("#stock-chart").getKendoStockChart();
  chart.saveAsPDF();
&lt;/script&gt;
</code></pre>

<h3 id="configuration-pdf.creator">
<a href="#configuration-pdf.creator">pdf.creator </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "Kendo UI PDF Generator")</em>
</h3>

<p>The creator of the PDF document.</p>

<h4>Example - set the creator</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
  $("#stock-chart").kendoStockChart({
      pdf: {
          creator: "John Doe"
      },
      series: [{
        type: "line",
        field: "value",
        categoryField: "date",
        data: [
          { value: 1, date: new Date(2012, 1, 1) },
          { value: 2, date: new Date(2012, 1, 2) }
        ]
      }]
  });

  var chart = $("#stock-chart").getKendoStockChart();
  chart.saveAsPDF();
&lt;/script&gt;
</code></pre>

<h3 id="configuration-pdf.date">
<a href="#configuration-pdf.date">pdf.date </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" class="type-link"><code>Date</code></a>
</h3>

<p>The date when the PDF document is created. Defaults to <code>new Date()</code>.</p>

<h4>Example - set the date</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
  $("#stock-chart").kendoStockChart({
      pdf: {
          date: new Date("2014/10/10")
      },
      series: [{
        type: "line",
        field: "value",
        categoryField: "date",
        data: [
          { value: 1, date: new Date(2012, 1, 1) },
          { value: 2, date: new Date(2012, 1, 2) }
        ]
      }]
  });

  var chart = $("#stock-chart").getKendoStockChart();
  chart.saveAsPDF();
&lt;/script&gt;
</code></pre>

<h3 id="configuration-pdf.forceProxy">
<a href="#configuration-pdf.forceProxy">pdf.forceProxy </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: false)</em>
</h3>

<p>If set to true, the content will be forwarded to <a href="#configuration-pdf.proxyURL">proxyURL</a> even if the browser supports saving files locally.</p>

<h4>Example - use proxy</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
  $("#stock-chart").kendoStockChart({
      pdf: {
          proxyURL: "/save",
          forceProxy: true
      },
      series: [{
        type: "line",
        field: "value",
        categoryField: "date",
        data: [
          { value: 1, date: new Date(2012, 1, 1) },
          { value: 2, date: new Date(2012, 1, 2) }
        ]
      }]
  });

  var chart = $("#stock-chart").getKendoStockChart();
  chart.saveAsPDF();
&lt;/script&gt;
</code></pre>

<h3 id="configuration-pdf.fileName">
<a href="#configuration-pdf.fileName">pdf.fileName </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "Export.pdf")</em>
</h3>

<p>Specifies the file name of the exported PDF file.</p>

<h4>Example - set the default PDF file name</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
  $("#stock-chart").kendoStockChart({
      pdf: {
          fileName: "Products.pdf"
      },
      series: [{
        type: "line",
        field: "value",
        categoryField: "date",
        data: [
          { value: 1, date: new Date(2012, 1, 1) },
          { value: 2, date: new Date(2012, 1, 2) }
        ]
      }]
  });

  var chart = $("#stock-chart").getKendoStockChart();
  chart.saveAsPDF();
&lt;/script&gt;
</code></pre>

<h3 id="configuration-pdf.keywords">
<a href="#configuration-pdf.keywords">pdf.keywords </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: null)</em>
</h3>

<p>Specifies the keywords of the exported PDF file.</p>

<h4>Example - set the keywords</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
  $("#stock-chart").kendoStockChart({
      pdf: {
          keywords: "monthly report"
      },
      series: [{
        type: "line",
        field: "value",
        categoryField: "date",
        data: [
          { value: 1, date: new Date(2012, 1, 1) },
          { value: 2, date: new Date(2012, 1, 2) }
        ]
      }]
  });

  var chart = $("#stock-chart").getKendoStockChart();
  chart.saveAsPDF();
&lt;/script&gt;
</code></pre>

<h3 id="configuration-pdf.landscape">
<a href="#configuration-pdf.landscape">pdf.landscape </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: false)</em>
</h3>

<p>Set to <code>true</code> to reverse the paper dimensions if needed such that width is the larger edge.</p>

<h4>Example - enable landscape mode</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
  $("#stock-chart").kendoStockChart({
      pdf: {
          paperSize: "A4",
          landscape: true
      },
      series: [{
        type: "line",
        field: "value",
        categoryField: "date",
        data: [
          { value: 1, date: new Date(2012, 1, 1) },
          { value: 2, date: new Date(2012, 1, 2) }
        ]
      }]
  });

  var chart = $("#stock-chart").getKendoStockChart();
  chart.saveAsPDF();
&lt;/script&gt;
</code></pre>

<h3 id="configuration-pdf.margin">
<a href="#configuration-pdf.margin">pdf.margin </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Specifies the margins of the page (numbers or strings with units). Supported
units are "mm", "cm", "in" and "pt" (default).</p>

<h4>Example - set the margins</h4>

<pre><code>&lt;div id="chart" style="width: 600px; height: 400px;"&gt;&lt;/div&gt;
&lt;script&gt;
  $("#stock-chart").kendoStockChart({
      pdf: {
          margin: {
              left: 10,
              right: "10pt",
              top: "10mm",
              bottom: "1in"
          }
      },
      series: [{
        type: "line",
        field: "value",
        categoryField: "date",
        data: [
          { value: 1, date: new Date(2012, 1, 1) },
          { value: 2, date: new Date(2012, 1, 2) }
        ]
      }]
  });

  var chart = $("#stock-chart").getKendoStockChart();
  chart.saveAsPDF();
&lt;/script&gt;
</code></pre>

<h3 id="configuration-pdf.margin.bottom">
<a href="#configuration-pdf.margin.bottom">pdf.margin.bottom </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: 0)</em>
</h3>

<p>The bottom margin. Numbers are considered as "pt" units.</p>

<h3 id="configuration-pdf.margin.left">
<a href="#configuration-pdf.margin.left">pdf.margin.left </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: 0)</em>
</h3>

<p>The left margin. Numbers are considered as "pt" units.</p>

<h3 id="configuration-pdf.margin.right">
<a href="#configuration-pdf.margin.right">pdf.margin.right </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: 0)</em>
</h3>

<p>The right margin. Numbers are considered as "pt" units.</p>

<h3 id="configuration-pdf.margin.top">
<a href="#configuration-pdf.margin.top">pdf.margin.top </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: 0)</em>
</h3>

<p>The top margin. Numbers are considered as "pt" units.</p>

<h3 id="configuration-pdf.paperSize">
<a href="#configuration-pdf.paperSize">pdf.paperSize </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a> <em>(default: "auto")</em>
</h3>

<p>Specifies the paper size of the PDF document.
The default "auto" means paper size is determined by content.</p>

<blockquote>
<p>The size of the content in pixels will match the size of the output in points (1 pixel = 1/72 inch).</p>
</blockquote>

<p>Supported values:</p>

<ul>
<li>A predefined size: "A4", "A3" etc</li>
<li>An array of two numbers specifying the width and height in points (1pt = 1/72in)</li>
<li>An array of two strings specifying the width and height in units.
Supported units are "mm", "cm", "in" and "pt".</li>
</ul>

<h4>Example - set custom paper size</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
  $("#stock-chart").kendoStockChart({
      pdf: {
          paperSize: ["20cm", "20cm"]
      },
      series: [{
        type: "line",
        field: "value",
        categoryField: "date",
        data: [
          { value: 1, date: new Date(2012, 1, 1) },
          { value: 2, date: new Date(2012, 1, 2) }
        ]
      }]
  });

  var chart = $("#stock-chart").getKendoStockChart();
  chart.saveAsPDF();
&lt;/script&gt;
</code></pre>

<h3 id="configuration-pdf.proxyURL">
<a href="#configuration-pdf.proxyURL">pdf.proxyURL </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: null)</em>
</h3>

<p>The URL of the server side proxy which will stream the file to the end user.</p>

<p>A proxy will be used when the browser isn't capable of saving files locally.
Such browsers are IE version 9 and lower and Safari.</p>

<p>The developer is responsible for implementing the server-side proxy.</p>

<p>The proxy will receive a POST request with the following parameters in the request body:</p>

<ul>
<li>contentType: The MIME type of the file</li>
<li>base64: The base-64 encoded file content</li>
<li>fileName: The file name, as requested by the caller.</li>
</ul>

<p>The proxy should return the decoded file with set "Content-Disposition" header.</p>

<h4>Example - set the server proxy URL</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
  $("#stock-chart").kendoStockChart({
      pdf: {
          proxyURL: "/save"
      },
      series: [{
        type: "line",
        field: "value",
        categoryField: "date",
        data: [
          { value: 1, date: new Date(2012, 1, 1) },
          { value: 2, date: new Date(2012, 1, 2) }
        ]
      }]
  });

  var chart = $("#stock-chart").getKendoStockChart();
  chart.saveAsPDF();
&lt;/script&gt;
</code></pre>

<h3 id="configuration-pdf.proxyTarget">
<a href="#configuration-pdf.proxyTarget">pdf.proxyTarget </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "_self")</em>
</h3>

<p>A name or keyword indicating where to display the document returned from the proxy.</p>

<p>If you want to display the document in a new window or iframe,
the proxy should set the "Content-Disposition" header to <code>inline; filename="&lt;fileName.pdf&gt;"</code>.</p>

<h4>Example - open the generated document in a new window</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
  $("#stock-chart").kendoStockChart({
      pdf: {
          forceProxy: true,
          proxyURL: "/save",
          proxyTarget: "_blank"
      },
      series: [{
        type: "line",
        field: "value",
        categoryField: "date",
        data: [
          { value: 1, date: new Date(2012, 1, 1) },
          { value: 2, date: new Date(2012, 1, 2) }
        ]
      }]
  });

  var chart = $("#stock-chart").getKendoStockChart();
  chart.saveAsPDF();
&lt;/script&gt;
</code></pre>

<h3 id="configuration-pdf.subject">
<a href="#configuration-pdf.subject">pdf.subject </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: null)</em>
</h3>

<p>Sets the subject of the PDF file.</p>

<h4>Example - set the subject</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
  $("#stock-chart").kendoStockChart({
      pdf: {
          subject: "Products"
      },
      series: [{
        type: "line",
        field: "value",
        categoryField: "date",
        data: [
          { value: 1, date: new Date(2012, 1, 1) },
          { value: 2, date: new Date(2012, 1, 2) }
        ]
      }]
  });

  var chart = $("#stock-chart").getKendoStockChart();
  chart.saveAsPDF();
&lt;/script&gt;
</code></pre>

<h3 id="configuration-pdf.title">
<a href="#configuration-pdf.title">pdf.title </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: null)</em>
</h3>

<p>Sets the title of the PDF file.</p>

<h4>Example - set the title</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
  $("#stock-chart").kendoStockChart({
      pdf: {
          title: "Products"
      },
      series: [{
        type: "line",
        field: "value",
        categoryField: "date",
        data: [
          { value: 1, date: new Date(2012, 1, 1) },
          { value: 2, date: new Date(2012, 1, 2) }
        ]
      }]
  });

  var chart = $("#stock-chart").getKendoStockChart();
  chart.saveAsPDF();
&lt;/script&gt;
</code></pre>

<h3 id="configuration-plotArea">
<a href="#configuration-plotArea">plotArea </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The plot area configuration options. This is the area containing the plotted series.</p>

<h3 id="configuration-plotArea.background">
<a href="#configuration-plotArea.background">plotArea.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "white")</em>
</h3>

<p>The background color of the plot area.</p>

<h3 id="configuration-plotArea.opacity">
<a href="#configuration-plotArea.opacity">plotArea.opacity </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 1)</em>
</h3>

<p>The background opacity of the plot area.</p>

<h3 id="configuration-plotArea.border">
<a href="#configuration-plotArea.border">plotArea.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the plot area.</p>

<h3 id="configuration-plotArea.border.color">
<a href="#configuration-plotArea.border.color">plotArea.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border.</p>

<h3 id="configuration-plotArea.border.dashType">
<a href="#configuration-plotArea.border.dashType">plotArea.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.</p>

<h3 id="configuration-plotArea.border.width">
<a href="#configuration-plotArea.border.width">plotArea.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-plotArea.margin">
<a href="#configuration-plotArea.margin">plotArea.margin </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a><em>(default: 5)</em>
</h3>

<p>The margin of the plot area.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    // sets the top, right, bottom and left margin to 3px.
    margin: 3

    // sets the top and left margin to 1px
    // margin right and bottom are with 5px (by default)
    margin: { top: 1, left: 1 }
</code></pre>

<h3 id="configuration-renderAs">
<a href="#configuration-renderAs">renderAs </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>Sets the preferred rendering engine.
If it is not supported by the browser, the Chart will switch to the first available mode.</p>

<p>The supported values are:</p>

<ul>
<li>"svg" - renders the widget as inline SVG document, if available</li>
<li>"canvas" - renders the widget as a Canvas element, if available.</li>
</ul>

<h3 id="configuration-Example"><a href="#configuration-Example">Example - Render as Canvas, if supported</a></h3>

<pre><code>&lt;div id="stock-chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#stock-chart").kendoStockChart({
    renderAs: "canvas",
    series: [{
      type: "line",
      field: "value",
      categoryField: "date",
      data: [
        { value: 1, date: new Date(2012, 1, 1) },
        { value: 2, date: new Date(2012, 1, 2) }
      ]
    }]
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-series">
<a href="#configuration-series">series </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>Array of series definitions.</p>

<p>The series type is determined by the value of the type field.
If a type value is missing, the type is assumed to be the one specified in seriesDefaults.</p>

<p>Each series type has a different set of options.</p>

<blockquote>
<p><strong>Info:</strong> Some options accept function as argument. They will be evaluated for each point (supplied as parameter). The theme/seriesDefaults value will be used if no value is returned.</p>
</blockquote>

<h3 id="configuration-series.type">
<a href="#configuration-series.type">series.type </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The type of the series. Available types:</p>

<ul>
<li>area</li>
<li>column</li>
<li>line</li>
<li>candlestick, ohlc</li>
<li>bullet</li>
</ul>

<h3 id="configuration-series.dashType">
<a href="#configuration-series.dashType">series.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "solid")</em>
</h3>

<p>The series line dash type.</p>

<p>** Applicable only to line series **</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.</p>

<h3 id="configuration-series.data">
<a href="#configuration-series.data">series.data </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>Array of data items. The data item type can be either a:</p>

<ul>
<li>Array of objects. Each point is bound to the specified series fields.</li>
<li>Array of numbers. Available for area, column and line series.</li>
<li>Array of arrays of numbers. Available for:

<ul>
<li>OHLC and candlestick series (open, high, low, close)</li>
</ul>
</li>
</ul>

<h3 id="configuration-series.highField">
<a href="#configuration-series.highField">series.highField </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The data field containing the high value.</p>

<p>** Available for candlestick and ohlc series only **</p>

<h3 id="configuration-series.field">
<a href="#configuration-series.field">series.field </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The data field containing the series value.</p>

<h3 id="configuration-series.categoryField">
<a href="#configuration-series.categoryField">series.categoryField </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "category")</em>
</h3>

<p>The data item field which contains the category name or date.</p>

<blockquote>
<p>The points will be rendered in chronological order if the category is a date.</p>

<p>If specified, the <a href="#configuration-dateField">dateField</a> option is used as a default.</p>
</blockquote>

<h4>Example - set series date category field</h4>

<pre><code>&lt;div id="stock-chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#stock-chart").kendoStockChart({
    series: [{
      type: "line",
      field: "value",
      categoryField: "date",
      data: [
        { value: 1, date: new Date(2012, 1, 1) },
        { value: 2, date: new Date(2012, 1, 2) }
      ]
    }]
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-series.currentField">
<a href="#configuration-series.currentField">series.currentField </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The data field containing the current value.</p>

<p>** Available for bullet and verticalBullet series. **</p>

<h3 id="configuration-series.targetField">
<a href="#configuration-series.targetField">series.targetField </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The data field containing the target value.</p>

<p>** Available for bullet and verticalBullet series. **</p>

<h3 id="configuration-series.name">
<a href="#configuration-series.name">series.name </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The series name visible in the legend.</p>

<h4>Example - set the series name</h4>

<pre><code>&lt;div id="stock-chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#stock-chart").kendoStockChart({
  dataSource: {
    data: [
      { value: 1, category: "One", date: new Date(2012, 1, 1)},
      { value: 2, category: "Two", date: new Date(2012, 1, 2)}
    ]
  },
  dateField: "date",
  series: [
    {
      field: "value",
      name: "Value"
    }
  ],
  legend: {
    visible: true,
    position: "bottom"
  }
});
&lt;/script&gt;
</code></pre>

<p>The name can also be a <a href="/api/framework/kendo#methods-template">template</a> which sets the name of the series when bound to grouped data source.</p>

<p>The fields which can be used in the template are:</p>

<ul>
<li>  series - the series options</li>
<li>  group - the data group</li>
<li>  group.field - the name of the field used for grouping</li>
<li>  group.value - the field value for this group.</li>
</ul>

<h4>Example - set the chart series group name template</h4>

<pre><code>&lt;div id="stock-chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#stock-chart").kendoStockChart({
  dataSource: {
    data: [
      { value: 1, category: "One", date: new Date(2012, 1, 1)},
      { value: 2, category: "Two", date: new Date(2012, 1, 2)}
    ],
    group: { field: "category" }
  },
  dateField: "date",
  series: [
    {
      field: "value",
      name: "Category: #: group.value #"
    }
  ],
  legend: {
    visible: true,
    position: "bottom"
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-series.highlight">
<a href="#configuration-series.highlight">series.highlight </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Configures the appearance of highlighted points.</p>

<h3 id="configuration-series.highlight.visible">
<a href="#configuration-series.highlight.visible">series.highlight.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: true)</em>
</h3>

<p>A value indicating if the series points should be highlighted.</p>

<h3 id="configuration-series.highlight.border">
<a href="#configuration-series.highlight.border">series.highlight.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of highlighted points. The color is computed automatically from the base point color.</p>

<p>** Applicable to bubble, pie, candlestick and ohlc series. **</p>

<h3 id="configuration-series.highlight.border.width">
<a href="#configuration-series.highlight.border.width">series.highlight.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-series.highlight.border.color">
<a href="#configuration-series.highlight.border.color">series.highlight.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The border color.</p>

<h3 id="configuration-series.highlight.border.opacity">
<a href="#configuration-series.highlight.border.opacity">series.highlight.border.opacity </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The border opacity.</p>

<h3 id="configuration-series.highlight.color">
<a href="#configuration-series.highlight.color">series.highlight.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The highlight color.</p>

<p>** Available only for pie series **</p>

<h3 id="configuration-series.highlight.line">
<a href="#configuration-series.highlight.line">series.highlight.line </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Line options for highlighted points. The color is computed automatically from the base point color.</p>

<p>** Available only for candlestick series **</p>

<h3 id="configuration-series.highlight.line.width">
<a href="#configuration-series.highlight.line.width">series.highlight.line.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The width of the line.</p>

<h3 id="configuration-series.highlight.line.color">
<a href="#configuration-series.highlight.line.color">series.highlight.line.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The line color.</p>

<h3 id="configuration-series.highlight.line.opacity">
<a href="#configuration-series.highlight.line.opacity">series.highlight.line.opacity </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The opacity of the line.</p>

<h3 id="configuration-series.highlight.opacity">
<a href="#configuration-series.highlight.opacity">series.highlight.opacity </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The opacity of the highlighted points.</p>

<p>** Applicable to bubble, pie, candlestick and ohlc series. **</p>

<h3 id="configuration-series.aggregate">
<a href="#configuration-series.aggregate">series.aggregate </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a> <em>(default: "max")</em>
</h3>

<p>The aggregate function to apply for date series.</p>

<p>This function is used when a category (an year, month, etc.) contains two or more points.
The function return value is displayed instead of the individual points.</p>

<p>The supported values are:</p>

<ul>
<li>"avg" - the average of all values for the date period.</li>
<li>"count" - the number of values for the date period.</li>
<li>"max" - the highest value for the date period.</li>
<li>"min" - the lowest value for the date period.</li>
<li>"sum" - the sum of all values for the date period. Defaults to 0 if no data points are defined.</li>
<li>"sumOrNull" - the sum of all values for the date period. Defaults to <code>null</code> if no data points are defined.</li>
<li>"first" - the first value</li>
<li>function(values, series, dataItems, category) - user-defined aggregate function. Returns single value or data item.</li>
<li>object  - (compound aggregate) <strong>Applicable to "candlestick" and ohlc "series"</strong>. Specifies the aggregate for each data item field.</li>
</ul>

<h5>Example</h5>

<pre data-lang="pseudo"><code>    aggregate: {
        open: "max",
        high: "max",
        close: "min",
        low: "max"
    }
</code></pre>

<h3 id="configuration-series.axis">
<a href="#configuration-series.axis">series.axis </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "primary")</em>
</h3>

<p>The name of the value axis to use.</p>

<p>** Applicable to area, column, line, ohlc and candlestick series **</p>

<h3 id="configuration-series.border">
<a href="#configuration-series.border">series.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the points.</p>

<p>** Applicable to column, ohlc and candlestick series **</p>

<h3 id="configuration-series.border.color">
<a href="#configuration-series.border.color">series.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The color of the border.  It defaults to the color of the current series.</p>

<h3 id="configuration-series.border.dashType">
<a href="#configuration-series.border.dashType">series.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.</p>

<h3 id="configuration-series.border.opacity">
<a href="#configuration-series.border.opacity">series.border.opacity </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The border opacity.</p>

<h3 id="configuration-series.border.width">
<a href="#configuration-series.border.width">series.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a><em>(default: 1)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-series.closeField">
<a href="#configuration-series.closeField">series.closeField </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The data field containing the close value.</p>

<p>** Available for candlestick and ohlc series only **</p>

<h3 id="configuration-series.color">
<a href="#configuration-series.color">series.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The series base color. The supported values are:</p>

<ul>
<li>CSS color string, including hex and rgb</li>
<li>function(point) - user-defined function that will be evaluated for each point. Returning <code>undefined</code> will assume the default series color.</li>
</ul>

<h4>Example - set color as a string</h4>

<pre><code>&lt;div id="stock-chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [{
            date: new Date("2012-03-01 00:00"),
            price: 111
        }, {
            date: new Date("2012-03-02 00:00"),
            price: 121
        }, {
            date: new Date("2012-03-05 00:00"),
            price: 105
        }]
    },
    dateField: "date",
    series: [{
        type: "column",
        field: "price",
        color: "#ff0000"
    }]
});
&lt;/script&gt;
</code></pre>

<h4>Example set color as a function</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [{
            date: new Date("2012-03-01 00:00"),
            price: 111
        }, {
            date: new Date("2012-03-02 00:00"),
            price: 121
        }, {
            date: new Date("2012-03-05 00:00"),
            price: 95
        }]
    },
    dateField: "date",
    series: [{
        type: "column",
        field: "price",
        color: function(point) {
            if (point.value &lt; 100) {
                // Colorize matching points
                return "#f00";
            }

            // Use default theme color
        }
    }]
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-series.colorField">
<a href="#configuration-series.colorField">series.colorField </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The data field containing the point color.</p>

<p>** Applicable for column, candlestick and ohlc series. **</p>

<h3 id="configuration-series.downColor">
<a href="#configuration-series.downColor">series.downColor </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The series color when the open value is greater than the close value.</p>

<p>** Available for candlestick series only **</p>

<h3 id="configuration-series.downColorField">
<a href="#configuration-series.downColorField">series.downColorField </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The data field containing the color applied when the open value is greater than the close value.</p>

<p>** Available for candlestick series only **</p>

<h3 id="configuration-series.gap">
<a href="#configuration-series.gap">series.gap </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 1.5)</em>
</h3>

<p>The distance between category clusters.</p>

<p>** Applicable for column, candlestick and ohlc series. **</p>

<h3 id="configuration-series.labels">
<a href="#configuration-series.labels">series.labels </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Configures the series data labels.</p>

<h4><em>"circle"</em></h4>

<p>The labels are positioned in circle around the chart.</p>

<h4><em>"column"</em></h4>

<p>The labels are positioned in columns to the left and right of the chart.</p>

<h3 id="configuration-series.labels.background">
<a href="#configuration-series.labels.background">series.labels.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The background color of the labels.</p>

<h3 id="configuration-series.labels.border">
<a href="#configuration-series.labels.border">series.labels.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the labels.</p>

<h3 id="configuration-series.labels.border.color">
<a href="#configuration-series.labels.border.color">series.labels.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border.</p>

<h3 id="configuration-series.labels.border.dashType">
<a href="#configuration-series.labels.border.dashType">series.labels.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.</p>

<h3 id="configuration-series.labels.border.width">
<a href="#configuration-series.labels.border.width">series.labels.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-series.labels.color">
<a href="#configuration-series.labels.color">series.labels.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The text color of the labels.</p>

<h3 id="configuration-series.labels.font">
<a href="#configuration-series.labels.font">series.labels.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a><em>(default: "12px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The font style of the labels.</p>

<h3 id="configuration-series.labels.format">
<a href="#configuration-series.labels.format">series.labels.format </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The format of the labels.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    //sets format of the labels
    format: "C"
</code></pre>

<h3 id="configuration-series.labels.margin">
<a href="#configuration-series.labels.margin">series.labels.margin </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a><em>(default: { left: 5, right: 5})</em>
</h3>

<p>The margin of the labels.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    // sets the top, right, bottom and left margin to 3px.
    margin: 3

    // sets the top and bottom margin to 1px
    // margin left and right are with 5px (by default)
    margin: { top: 1, bottom: 1 }
</code></pre>

<h3 id="configuration-series.labels.padding">
<a href="#configuration-series.labels.padding">series.labels.padding </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a><em>(default: 0)</em>
</h3>

<p>The padding of the labels.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    // sets the top, right, bottom and left padding to 3px.
    padding: 3

    // sets the top and left padding to 1px
    // padding right and bottom are with 0px (by default)
    padding: { top: 1, left: 1 }
</code></pre>

<h3 id="configuration-series.labels.position">
<a href="#configuration-series.labels.position">series.labels.position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a><em>(default: "above")</em>
</h3>

<p>Defines the position of the labels.</p>

<h4><em>"above"</em></h4>

<p>The label is positioned at the top of the marker.</p>

<p>** Applicable for area and line series. **</p>

<h4><em>"center"</em></h4>

<p>The label is positioned at the point center.</p>

<p>** Applicable for column series only. **</p>

<h4><em>"insideEnd"</em></h4>

<p>The label is positioned inside, near the end of the point.</p>

<p>** Applicable for column series only. **</p>

<h4><em>"insideBase"</em></h4>

<p>The label is positioned inside, near the base of the bar.</p>

<p>** Applicable for column series. **</p>

<h4><em>"outsideEnd"</em></h4>

<p>The label is positioned outside, near the end of the bar.</p>

<p>** Applicable for column series only. Not applicable for stacked series. **</p>

<h4><em>"right"</em></h4>

<p>The label is positioned to the right of the marker.</p>

<p>** Applicable for area and line series. **</p>

<h4><em>"below"</em></h4>

<p>The label is positioned at the bottom of the marker.</p>

<p>** Applicable for area and line series. **</p>

<h4><em>"left"</em></h4>

<p>The label is positioned to the left of the marker.</p>

<p>** Applicable for area and line series. **</p>

<h3 id="configuration-series.labels.template">
<a href="#configuration-series.labels.template">series.labels.template </a><code>String  |</code><code> Function</code>
</h3>

<p>The <a href="/api/framework/kendo#methods-template">template</a> which renders the chart series label.</p>

<p>The fields which can be used in the template are:</p>

<ul>
<li>  category - the category name. Available for area, bar, column, bubble, donut, line and pie series.</li>
<li>  dataItem - the original data item used to construct the point. Will be null if binding to array.</li>
<li>  percentage - the point value represented as a percentage value. Available only for 100% stacked charts.</li>
<li>  series - the data series</li>
<li>  value - the point value. Can be a number or object containing each bound field.</li>
</ul>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    // chart initialization
    $("#chart").kendoChart({
         title: {
             text: "My Chart Title"
         },
         series: [
             {
                 type: "area",
                 name: "Series 1",
                 data: [200, 450, 300, 125],
                 labels: {
                     // label template
                     template: "#= value #%",
                     visible: true
                 }
             }
         ],
         categoryAxis: {
             categories: [2000, 2001, 2002, 2003]
         }
    });
</code></pre>

<h3 id="configuration-series.labels.visible">
<a href="#configuration-series.labels.visible">series.labels.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a><em>(default: false)</em>
</h3>

<p>The visibility of the labels.</p>

<h3 id="configuration-series.line">
<a href="#configuration-series.line">series.line </a><code>String  |</code><code> Object</code>
</h3>

<p>Line options.</p>

<p>** Applicable to area, candlestick and ohlc series. **</p>

<h3 id="configuration-series.line.color">
<a href="#configuration-series.line.color">series.line.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The line color.</p>

<h3 id="configuration-series.line.opacity">
<a href="#configuration-series.line.opacity">series.line.opacity </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 1)</em>
</h3>

<p>The line opacity.</p>

<h3 id="configuration-series.line.width">
<a href="#configuration-series.line.width">series.line.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: 4)</em>
</h3>

<p>The line width.</p>

<h3 id="configuration-series.line.style">
<a href="#configuration-series.line.style">series.line.style </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "normal")</em>
</h3>

<p>The supported values are:</p>

<ul>
<li>"normal" - The values will be connected with straight line.</li>
<li>"step" - The values will be connected with a line with right angle.</li>
<li>"smooth" - The values will be connected with a smooth line.</li>
</ul>

<blockquote>
<p>The default value is "normal".</p>

<p>The <code>style</code> option is supported when <a href="#configuration-series.type">series.type</a> is set to "area".</p>
</blockquote>

<h3 id="configuration-series.lowField">
<a href="#configuration-series.lowField">series.lowField </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The data field containing the low value.</p>

<p>** Available for candlestick and ohlc series **</p>

<h3 id="configuration-series.markers">
<a href="#configuration-series.markers">series.markers </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Marker options.</p>

<p>** Applicable for area and line series. **</p>

<h3 id="configuration-series.markers.background">
<a href="#configuration-series.markers.background">series.markers.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The background color of the current series markers.</p>

<h3 id="configuration-series.markers.border">
<a href="#configuration-series.markers.border">series.markers.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The border of the markers.</p>

<h3 id="configuration-series.markers.border.color">
<a href="#configuration-series.markers.border.color">series.markers.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border.</p>

<h3 id="configuration-series.markers.border.width">
<a href="#configuration-series.markers.border.width">series.markers.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-series.markers.size">
<a href="#configuration-series.markers.size">series.markers.size </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a><em>(default: 6)</em>
</h3>

<p>The marker size.</p>

<h3 id="configuration-series.markers.rotation">
<a href="#configuration-series.markers.rotation">series.markers.rotation </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The rotation angle of the markers.</p>

<h4>Example</h4>

<pre><code>&lt;div id="stock-chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#stock-chart").kendoStockChart({
    series: [{
      type: "line",
      field: "value",
      categoryField: "date",
      markers: {
        type: "square",
        rotation: 45
      },
      data: [
        { value: 1, date: new Date(2012, 1, 1) },
        { value: 2, date: new Date(2012, 1, 2) }
      ]
    }]
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-series.markers.type">
<a href="#configuration-series.markers.type">series.markers.type </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a><em>(default: "circle")</em>
</h3>

<p>Configures the markers shape type.</p>

<h4><em>"square"</em></h4>

<p>The marker shape is square.</p>

<h4><em>"triangle"</em></h4>

<p>The marker shape is triangle.</p>

<h4><em>"circle"</em></h4>

<p>The marker shape is circle.</p>

<h4><em>"cross"</em></h4>

<p>The marker shape is cross.</p>

<h3 id="configuration-series.markers.visible">
<a href="#configuration-series.markers.visible">series.markers.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a><em>(default: false)</em>
</h3>

<p>The markers visibility.</p>

<h3 id="configuration-series.missingValues">
<a href="#configuration-series.missingValues">series.missingValues </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The behavior for handling missing values. The supported values are:</p>

<ul>
<li>"gap" - the plot stops before the missing point and continues after it.</li>
<li>"interpolate" - the value is interpolated from neighboring points.</li>
<li>"zero" - the value is assumed to be zero.</li>
</ul>

<blockquote>
<p>The default value is "interpolate", except for "area" and stacked series which default to "zero".</p>

<p>The <code>missingValues</code> option is supported when <a href="#configuration-series.type">series.type</a> is set to "area" and "line".</p>
</blockquote>

<h3 id="configuration-series.style">
<a href="#configuration-series.style">series.style </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "normal")</em>
</h3>

<p>The supported values are:</p>

<ul>
<li>"normal" - The values will be connected with straight line.</li>
<li>"step" - The values will be connected with a line at right.</li>
<li>"smooth" - The values will be connected with a smooth line.</li>
</ul>

<blockquote>
<p>The default value is "normal".</p>

<p>The <code>style</code> option is supported when <a href="#configuration-series.type">series.type</a> is set to "line".</p>
</blockquote>

<h3 id="configuration-series.negativeColor">
<a href="#configuration-series.negativeColor">series.negativeColor </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>Color to use for bars with negative values.</p>

<p>** Applicable only to column series. **</p>

<p>The plot stops before the missing point and continues after it.</p>

<h3 id="configuration-series.opacity">
<a href="#configuration-series.opacity">series.opacity </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The series opacity.</p>

<h3 id="configuration-series.openField">
<a href="#configuration-series.openField">series.openField </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The data field containing the open value.</p>

<p>** Available for candlestick and ohlc series **</p>

<h3 id="configuration-series.overlay">
<a href="#configuration-series.overlay">series.overlay </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The effects overlay.</p>

<h3 id="configuration-series.overlay.gradient">
<a href="#configuration-series.overlay.gradient">series.overlay.gradient </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The gradient name.</p>

<p>Available options:</p>

<ul>
<li>
<strong>glass</strong> (column and candlestick series)</li>
<li><strong>none</strong></li>
</ul>

<h3 id="configuration-series.spacing">
<a href="#configuration-series.spacing">series.spacing </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0.4)</em>
</h3>

<p>Space between points as proportion of the point width.</p>

<p>Available for column, candlestick and ohlc series.</p>

<h3 id="configuration-series.stack">
<a href="#configuration-series.stack">series.stack </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> <em>(default: false)</em>
</h3>

<p>A boolean value indicating if the series should be stacked.
A string value is interpreted as <a href="#configuration-series.stack.group">series.stack.group</a>.</p>

<blockquote>
<p>The <code>stack</code> options is supported when <a href="#configuration-series.type">series.type</a> is set to "bar", "column", "line", "area", "verticalLine", "verticalArea", "radarLine", "radarArea" and "radarColumn".</p>

<p>Stack settings of the first series are applied to the rest of the series.</p>
</blockquote>

<h3 id="configuration-series.stack.type">
<a href="#configuration-series.stack.type">series.stack.type </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "normal")</em>
</h3>

<p>The type of stack to plot. The following types are supported:</p>

<ul>
<li>"normal" - the value of the stack is the sum of all points in the category (or group)</li>
<li>"100%" - the value of the stack is always 100% (1.00). Points within the category (or group) are represented as percentages.</li>
</ul>

<h3 id="configuration-series.stack.group">
<a href="#configuration-series.stack.group">series.stack.group </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>Indicates that the series should be stacked in a group with the specified name.</p>

<blockquote>
<p>The <code>group</code> option is supported when <a href="#configuration-series.type">series.type</a> is set to "bar" or "column".</p>
</blockquote>

<h3 id="configuration-series.tooltip">
<a href="#configuration-series.tooltip">series.tooltip </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The data point tooltip configuration options.</p>

<h3 id="configuration-series.tooltip.background">
<a href="#configuration-series.tooltip.background">series.tooltip.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the tooltip. The default is determined from the series color.</p>

<h3 id="configuration-series.tooltip.border">
<a href="#configuration-series.tooltip.border">series.tooltip.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border configuration options.</p>

<h3 id="configuration-series.tooltip.border.color">
<a href="#configuration-series.tooltip.border.color">series.tooltip.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border.</p>

<h3 id="configuration-series.tooltip.border.width">
<a href="#configuration-series.tooltip.border.width">series.tooltip.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-series.tooltip.color">
<a href="#configuration-series.tooltip.color">series.tooltip.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the tooltip. The default is the same as the series labels color.</p>

<h3 id="configuration-series.tooltip.font">
<a href="#configuration-series.tooltip.font">series.tooltip.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "12px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The tooltip font.</p>

<h3 id="configuration-series.tooltip.format">
<a href="#configuration-series.tooltip.format">series.tooltip.format </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The tooltip format. Format variables depend on the series type:</p>

<ul>
<li>Area, column, line and pie

<ul>
<li>  <strong>0</strong> - value</li>
</ul>
</li>
<li>Candlestick and OHLC

<ul>
<li>  <strong>0</strong> - open value</li>
<li>  <strong>1</strong> - high value</li>
<li>  <strong>2</strong> - low value</li>
<li>  <strong>3</strong> - close value</li>
<li>  <strong>4</strong> - category name</li>
</ul>
</li>
</ul>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    //sets format of the tooltip
    format: "{0:C}--{1:C}"
</code></pre>

<h3 id="configuration-series.tooltip.padding">
<a href="#configuration-series.tooltip.padding">series.tooltip.padding </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The padding of the tooltip.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    // sets the top, right, bottom and left padding to 3px.
    padding: 3

    // sets the top and left padding to 1px
    // right and bottom padding are left at their default values
    padding: { top: 1, left: 1 }
</code></pre>

<h3 id="configuration-series.tooltip.template">
<a href="#configuration-series.tooltip.template">series.tooltip.template </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The tooltip template.
Template variables:</p>

<ul>
<li>  <strong>value</strong> - the point value (either a number or an object)</li>
<li>  <strong>category</strong> - the category name</li>
<li>  <strong>series</strong> - the data series</li>
<li>  <strong>dataItem</strong> - the original data item used to construct the point.
    Will be null if binding to array.</li>
</ul>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    $("#chart").kendoChart({
         title: {
             text: "My Chart Title"
         },
         series: [
             {
                 type: "area",
                 name: "Series 1",
                 data: [200, 450, 300, 125],
                 tooltip: {
                     visible: true,
                     template: "#= category # - #= value #"
                 }
             }
         ],
         categoryAxis: {
             categories: [2000, 2001, 2002, 2003]
         }
    });
</code></pre>

<h3 id="configuration-series.tooltip.visible">
<a href="#configuration-series.tooltip.visible">series.tooltip.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>A value indicating if the tooltip should be displayed.</p>

<h3 id="configuration-series.visibleInLegend">
<a href="#configuration-series.visibleInLegend">series.visibleInLegend </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: true)</em>
</h3>

<p>A value indicating whether to show the series name in the legend.</p>

<h3 id="configuration-series.width">
<a href="#configuration-series.width">series.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The line width.</p>

<p>** Applicable for area and line series. **</p>

<h3 id="configuration-series.target">
<a href="#configuration-series.target">series.target </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The target of the bullet chart.</p>

<h3 id="configuration-series.target.line">
<a href="#configuration-series.target.line">series.target.line </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The target line.</p>

<h3 id="configuration-series.target.line.width">
<a href="#configuration-series.target.line.width">series.target.line.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The width of the line.</p>

<h3 id="configuration-series.target.color">
<a href="#configuration-series.target.color">series.target.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The target color.</p>

<h3 id="configuration-series.target.border">
<a href="#configuration-series.target.border">series.target.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The border of the target.</p>

<h3 id="configuration-series.target.border.color">
<a href="#configuration-series.target.border.color">series.target.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border.</p>

<h3 id="configuration-series.target.border.dashType">
<a href="#configuration-series.target.border.dashType">series.target.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.</p>

<h3 id="configuration-series.target.border.width">
<a href="#configuration-series.target.border.width">series.target.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-series.notes">
<a href="#configuration-series.notes">series.notes </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The series notes configuration.</p>

<h3 id="configuration-series.notes.icon">
<a href="#configuration-series.notes.icon">series.notes.icon </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The icon of the notes.</p>

<h3 id="configuration-series.notes.position">
<a href="#configuration-series.notes.position">series.notes.position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The position of the series note.</p>

<ul>
<li>"top" - The note is positioned on the top.</li>
<li>"bottom" - The note is positioned on the bottom.</li>
<li>"left" - The note is positioned on the left.</li>
<li>"right" - The note is positioned on the right.</li>
</ul>

<h3 id="configuration-series.notes.icon.background">
<a href="#configuration-series.notes.icon.background">series.notes.icon.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the notes icon.</p>

<h3 id="configuration-series.notes.icon.border">
<a href="#configuration-series.notes.icon.border">series.notes.icon.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the icon.</p>

<h3 id="configuration-series.notes.icon.border.color">
<a href="#configuration-series.notes.icon.border.color">series.notes.icon.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The border color of the icon.</p>

<h3 id="configuration-series.notes.icon.border.width">
<a href="#configuration-series.notes.icon.border.width">series.notes.icon.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The border width of the icon.</p>

<h3 id="configuration-series.notes.icon.size">
<a href="#configuration-series.notes.icon.size">series.notes.icon.size </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The size of the icon.</p>

<h3 id="configuration-series.notes.icon.type">
<a href="#configuration-series.notes.icon.type">series.notes.icon.type </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "circle")</em>
</h3>

<p>The icon shape.</p>

<p>The supported values are:</p>

<ul>
<li>"circle" - the marker shape is circle.</li>
<li>"square" - the marker shape is square.</li>
<li>"triangle" - the marker shape is triangle.</li>
<li>"cross" - the marker shape is cross.</li>
</ul>

<h3 id="configuration-series.notes.icon.visible">
<a href="#configuration-series.notes.icon.visible">series.notes.icon.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: "true")</em>
</h3>

<p>The icon visibility.</p>

<h3 id="configuration-series.notes.label">
<a href="#configuration-series.notes.label">series.notes.label </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The label of the notes.</p>

<h3 id="configuration-series.notes.label.background">
<a href="#configuration-series.notes.label.background">series.notes.label.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the label. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-series.notes.label.border">
<a href="#configuration-series.notes.label.border">series.notes.label.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the label.</p>

<h3 id="configuration-series.notes.label.border.color">
<a href="#configuration-series.notes.label.border.color">series.notes.label.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "black")</em>
</h3>

<p>The color of the border. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-series.notes.label.border.dashType">
<a href="#configuration-series.notes.label.border.dashType">series.notes.label.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<p>The following dash types are supported:</p>

<ul>
<li>"dash" - a line consisting of dashes</li>
<li>"dashDot" - a line consisting of a repeating pattern of dash-dot</li>
<li>"dot" - a line consisting of dots</li>
<li>"longDash" - a line consisting of a repeating pattern of long-dash</li>
<li>"longDashDot" - a line consisting of a repeating pattern of long-dash-dot</li>
<li>"longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot</li>
<li>"solid" - a solid line</li>
</ul>

<h3 id="configuration-series.notes.label.border.width">
<a href="#configuration-series.notes.label.border.width">series.notes.label.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.</p>

<h3 id="configuration-series.notes.label.color">
<a href="#configuration-series.notes.label.color">series.notes.label.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the label. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-series.notes.label.font">
<a href="#configuration-series.notes.label.font">series.notes.label.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "12px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The font style of the label.</p>

<h3 id="configuration-series.notes.label.template">
<a href="#configuration-series.notes.label.template">series.notes.label.template </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The <a href="/api/framework/kendo#methods-template">template</a> which renders the labels.</p>

<p>The fields which can be used in the template are:</p>

<ul>
<li>value - the point value</li>
</ul>

<h3 id="configuration-series.notes.label.visible">
<a href="#configuration-series.notes.label.visible">series.notes.label.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: true)</em>
</h3>

<p>If set to <code>true</code> the chart will display the series notes label. By default the series notes label are visible.</p>

<h3 id="configuration-series.notes.label.rotation">
<a href="#configuration-series.notes.label.rotation">series.notes.label.rotation </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The rotation angle of the label. By default the label are not rotated.</p>

<h3 id="configuration-series.notes.label.format">
<a href="#configuration-series.notes.label.format">series.notes.label.format </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "{0}")</em>
</h3>

<p>The format used to display the notes label. Uses <a href="/api/framework/kendo#methods-format">kendo.format</a>. Contains one placeholder ("{0}") which represents the axis value.</p>

<h3 id="configuration-series.notes.label.position">
<a href="#configuration-series.notes.label.position">series.notes.label.position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "inside")</em>
</h3>

<p>The position of the labels.</p>

<ul>
<li>"inside" - the label is positioned inside of the icon.</li>
<li>"outside" - the label is positioned outside of the icon.</li>
</ul>

<h3 id="configuration-series.notes.line">
<a href="#configuration-series.notes.line">series.notes.line </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The line of the notes.</p>

<h3 id="configuration-series.notes.line.width">
<a href="#configuration-series.notes.line.width">series.notes.line.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The line width of the notes.</p>

<h3 id="configuration-series.notes.line.color">
<a href="#configuration-series.notes.line.color">series.notes.line.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The line color of the notes.</p>

<h3 id="configuration-series.notes.line.length">
<a href="#configuration-series.notes.line.length">series.notes.line.length </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The length of the connecting lines in pixels.</p>

<h3 id="configuration-series.zIndex">
<a href="#configuration-series.zIndex">series.zIndex </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>An optional Z-index that can be used to change the default stacking order of series.</p>

<p>The series with the highest Z-index will be placed on top.</p>

<p>Series with no Z-index will use the default stacking order based on series type.
For example line series will be on top with bar and area following below.</p>

<h3 id="configuration-seriesColors">
<a href="#configuration-seriesColors">seriesColors </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>The default colors for the chart's series. When all colors are used, new colors are pulled from the start again.</p>

<h3 id="configuration-seriesDefaults">
<a href="#configuration-seriesDefaults">seriesDefaults </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Default values for each series.</p>

<h3 id="configuration-seriesDefaults.area">
<a href="#configuration-seriesDefaults.area">seriesDefaults.area </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The area configuration options.
The default options for all area series. For more details see the series options.</p>

<h3 id="configuration-seriesDefaults.candlestick">
<a href="#configuration-seriesDefaults.candlestick">seriesDefaults.candlestick </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The candlestick configuration options.
The default options for all candlestick series. For more details see the series options.</p>

<h3 id="configuration-seriesDefaults.ohlc">
<a href="#configuration-seriesDefaults.ohlc">seriesDefaults.ohlc </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The ohlc configuration options.
The default options for all ohlc series. For more details see the series options.</p>

<h3 id="configuration-seriesDefaults.border">
<a href="#configuration-seriesDefaults.border">seriesDefaults.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the series.</p>

<h3 id="configuration-seriesDefaults.border.color">
<a href="#configuration-seriesDefaults.border.color">seriesDefaults.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border.</p>

<h3 id="configuration-seriesDefaults.border.dashType">
<a href="#configuration-seriesDefaults.border.dashType">seriesDefaults.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.</p>

<h3 id="configuration-seriesDefaults.border.width">
<a href="#configuration-seriesDefaults.border.width">seriesDefaults.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-seriesDefaults.column">
<a href="#configuration-seriesDefaults.column">seriesDefaults.column </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The column configuration options.
The default options for all column series. For more details see the series options.</p>

<h3 id="configuration-seriesDefaults.gap">
<a href="#configuration-seriesDefaults.gap">seriesDefaults.gap </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 1.5)</em>
</h3>

<p>The distance between category clusters.</p>

<h3 id="configuration-seriesDefaults.labels">
<a href="#configuration-seriesDefaults.labels">seriesDefaults.labels </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Configures the series data labels.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    $("#chart").kendoChart({
        seriesDefault: {
            // adjust the default label appearence for all series
            labels: {
                // set the margin on all sides to 1
                margin: 1,
                // format the labels as currency
                format: "C"
            }
        },
        //...
    });
</code></pre>

<h3 id="configuration-seriesDefaults.labels.background">
<a href="#configuration-seriesDefaults.labels.background">seriesDefaults.labels.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the labels. Any valid CSS color string will work here,
including hex and rgb.</p>

<h3 id="configuration-seriesDefaults.labels.border">
<a href="#configuration-seriesDefaults.labels.border">seriesDefaults.labels.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the labels.</p>

<h3 id="configuration-seriesDefaults.labels.border.color">
<a href="#configuration-seriesDefaults.labels.border.color">seriesDefaults.labels.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border.</p>

<h3 id="configuration-seriesDefaults.labels.border.dashType">
<a href="#configuration-seriesDefaults.labels.border.dashType">seriesDefaults.labels.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.</p>

<h3 id="configuration-seriesDefaults.labels.border.width">
<a href="#configuration-seriesDefaults.labels.border.width">seriesDefaults.labels.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-seriesDefaults.labels.color">
<a href="#configuration-seriesDefaults.labels.color">seriesDefaults.labels.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the labels. Any valid CSS color string will work here, including hex
and rgb.</p>

<h3 id="configuration-seriesDefaults.labels.font">
<a href="#configuration-seriesDefaults.labels.font">seriesDefaults.labels.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "12px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The font style of the labels.
labels</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    $("#chart").kendoChart({
        seriesDefault: {
            // adjust the default label appearence for all series
            labels: {
                // set the font size to 14px
                font: "14px Arial,Helvetica,sans-serif"
            }
        },
        //...
    });
</code></pre>

<h3 id="configuration-seriesDefaults.labels.format">
<a href="#configuration-seriesDefaults.labels.format">seriesDefaults.labels.format </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The format of the labels.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    //sets format of the labels
    format: "C"
</code></pre>

<h3 id="configuration-seriesDefaults.labels.margin">
<a href="#configuration-seriesDefaults.labels.margin">seriesDefaults.labels.margin </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a><em>(default: 0)</em>
</h3>

<p>The margin of the labels.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    $("#chart).kendoChart({
         labels: {
             // sets the top, right, bottom and left margin to 3px.
             margin: 3
         },
         //...
    });

    $("#chart").kendoChart({
         labels: {
             // sets the top and left margin to 1px
             // margin right and bottom are with 0px (by default)
             margin: { top: 1, left: 1 }
         },
         //...
    });
</code></pre>

<h3 id="configuration-seriesDefaults.labels.padding">
<a href="#configuration-seriesDefaults.labels.padding">seriesDefaults.labels.padding </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a><em>(default: 0)</em>
</h3>

<p>The padding of the labels.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    // sets the top, right, bottom and left padding to 3px.
    padding: 3

    // sets the top and left padding to 1px
    // padding right and bottom are with 0px (by default)
    padding: { top: 1, left: 1 }
</code></pre>

<h3 id="configuration-seriesDefaults.labels.template">
<a href="#configuration-seriesDefaults.labels.template">seriesDefaults.labels.template </a><code>String  |</code><code> Function</code>
</h3>

<p>The label template.
Template variables:</p>

<ul>
<li>  <strong>value</strong> - the point value</li>
<li>  <strong>category</strong> - the category name</li>
<li>  <strong>series</strong> - the data series</li>
<li>  <strong>dataItem</strong> - the original data item used to construct the point.
    Will be null if binding to array.</li>
</ul>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    // chart initialization
    $("#chart").kendoChart({
         title: {
             text: "My Chart Title"
         },
         seriesDefault: {
             labels: {
                 // label template
                 template: "#= value  #%",
                 visible: true
             }
         },
         series: [
             {
                 name: "Series 1",
                 data: [200, 450, 300, 125]
             }
         ],
         categoryAxis: {
             categories: [2000, 2001, 2002, 2003]
         }
    });
</code></pre>

<h3 id="configuration-seriesDefaults.labels.visible">
<a href="#configuration-seriesDefaults.labels.visible">seriesDefaults.labels.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>The visibility of the labels.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    $("#chart").kendoChart({
        seriesDefault: {
            labels: {
                // hide all the series labels by default
                visible: true
            },
            //...
        }
    });
</code></pre>

<h3 id="configuration-seriesDefaults.line">
<a href="#configuration-seriesDefaults.line">seriesDefaults.line </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The line configuration options.
The default options for all line series. For more details see the series options.</p>

<h3 id="configuration-seriesDefaults.overlay">
<a href="#configuration-seriesDefaults.overlay">seriesDefaults.overlay </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The effects overlay.</p>

<h3 id="configuration-seriesDefaults.pie">
<a href="#configuration-seriesDefaults.pie">seriesDefaults.pie </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The pie configuration options.
The default options for all pie series. For more details see the series options.</p>

<h3 id="configuration-seriesDefaults.spacing">
<a href="#configuration-seriesDefaults.spacing">seriesDefaults.spacing </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0.4)</em>
</h3>

<p>Space between bars.</p>

<h3 id="configuration-seriesDefaults.stack">
<a href="#configuration-seriesDefaults.stack">seriesDefaults.stack </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> <em>(default: false)</em>
</h3>

<p>A boolean value indicating if the series should be stacked.</p>

<blockquote>
<p>The <code>stack</code> options is supported when <a href="#configuration-series.type">series.type</a> is set to "bar", "column", "line", "area", "verticalLine", "verticalArea", "radarLine", "radarArea" and "radarColumn".</p>
</blockquote>

<h3 id="configuration-seriesDefaults.stack.type">
<a href="#configuration-seriesDefaults.stack.type">seriesDefaults.stack.type </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "normal")</em>
</h3>

<p>The type of stack to plot. The following types are supported:</p>

<ul>
<li>"normal" - the value of the stack is the sum of all points in the category (or group)</li>
<li>"100%" - the value of the stack is always 100% (1.00). Points within the category (or group) are represented as percentages.</li>
</ul>

<h3 id="configuration-seriesDefaults.type">
<a href="#configuration-seriesDefaults.type">seriesDefaults.type </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The default type of the series.</p>

<p>The supported values are:</p>

<ul>
<li>area</li>
<li>column</li>
<li>line</li>
<li>candlestick, ohlc</li>
<li>bullet</li>
</ul>

<h3 id="configuration-seriesDefaults.tooltip">
<a href="#configuration-seriesDefaults.tooltip">seriesDefaults.tooltip </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The data point tooltip configuration options.</p>

<h3 id="configuration-seriesDefaults.tooltip.background">
<a href="#configuration-seriesDefaults.tooltip.background">seriesDefaults.tooltip.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the tooltip. The default is determined from the series color.</p>

<h3 id="configuration-seriesDefaults.tooltip.border">
<a href="#configuration-seriesDefaults.tooltip.border">seriesDefaults.tooltip.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border configuration options.</p>

<h3 id="configuration-seriesDefaults.tooltip.border.color">
<a href="#configuration-seriesDefaults.tooltip.border.color">seriesDefaults.tooltip.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border.</p>

<h3 id="configuration-seriesDefaults.tooltip.border.width">
<a href="#configuration-seriesDefaults.tooltip.border.width">seriesDefaults.tooltip.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-seriesDefaults.tooltip.color">
<a href="#configuration-seriesDefaults.tooltip.color">seriesDefaults.tooltip.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the tooltip. The default is the same as the series labels color.</p>

<h3 id="configuration-seriesDefaults.tooltip.font">
<a href="#configuration-seriesDefaults.tooltip.font">seriesDefaults.tooltip.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "12px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The tooltip font.</p>

<h3 id="configuration-seriesDefaults.tooltip.format">
<a href="#configuration-seriesDefaults.tooltip.format">seriesDefaults.tooltip.format </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The tooltip format.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    //sets format of the tooltip
    format: "C"
</code></pre>

<h3 id="configuration-seriesDefaults.tooltip.padding">
<a href="#configuration-seriesDefaults.tooltip.padding">seriesDefaults.tooltip.padding </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The padding of the tooltip.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    // sets the top, right, bottom and left padding to 3px.
    padding: 3

    // sets the top and left padding to 1px
    // right and bottom padding are left at their default values
    padding: { top: 1, left: 1 }
</code></pre>

<h3 id="configuration-seriesDefaults.tooltip.template">
<a href="#configuration-seriesDefaults.tooltip.template">seriesDefaults.tooltip.template </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The tooltip template.
Template variables:</p>

<ul>
<li>  <strong>value</strong> - the point value</li>
<li>  <strong>category</strong> - the category name</li>
<li>  <strong>series</strong> - the data series</li>
<li>  <strong>dataItem</strong> - the original data item used to construct the point.
    Will be null if binding to array.</li>
</ul>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    $("#chart").kendoChart({
         title: {
             text: "My Chart Title"
         },
         seriesDefaults: {
             tooltip: {
                 visible: true,
                 template: "#= category # - #= value #"
             }
         },
         series: [
             {
                 name: "Series 1",
                 data: [200, 450, 300, 125]
             }
         ],
         categoryAxis: {
             categories: [2000, 2001, 2002, 2003]
         }
    });
</code></pre>

<h3 id="configuration-seriesDefaults.tooltip.visible">
<a href="#configuration-seriesDefaults.tooltip.visible">seriesDefaults.tooltip.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>A value indicating if the tooltip should be displayed.</p>

<h3 id="configuration-theme">
<a href="#configuration-theme">theme </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The chart theme. This can be either a built-in theme or "sass".
When set to "sass" the chart will read the variables from the <a href="/styles-and-layout/sass-themes">Sass-based themes</a>.</p>

<p>The supported values are:</p>

<ul>
<li>"sass" - special value, see notes</li>
<li>"black"</li>
<li>"blueopal"</li>
<li>"bootstrap"</li>
<li>"default"</li>
<li>"highcontrast"</li>
<li>"metro"</li>
<li>"metroblack"</li>
<li>"moonlight"</li>
<li>"silver"</li>
<li>"uniform"</li>
</ul>

<h3 id="configuration-title">
<a href="#configuration-title">title </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The chart title configuration options or text.</p>

<h3 id="configuration-title.align">
<a href="#configuration-title.align">title.align </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "center")</em>
</h3>

<p>The alignment of the title.</p>

<h4><em>"left"</em></h4>

<p>The text is aligned to the left.</p>

<h4><em>"center"</em></h4>

<p>The text is aligned to the middle.</p>

<h4><em>"right"</em></h4>

<p>The text is aligned to the right.</p>

<h3 id="configuration-title.background">
<a href="#configuration-title.background">title.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "white")</em>
</h3>

<p>The background color of the title.</p>

<h3 id="configuration-title.border">
<a href="#configuration-title.border">title.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the title.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    $("#chart").kendoChart({
        // set border options on the title
        title: {
            border: {
                // set the border color to a dark blue
                color: "#336699",
                // set the width of the border to 2 pixels
                width: 2,
                // set the border style to long dashes
                dashType: "longDash"
            }
        },
        ...
    });
</code></pre>

<h3 id="configuration-title.border.color">
<a href="#configuration-title.border.color">title.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border.</p>

<h3 id="configuration-title.border.dashType">
<a href="#configuration-title.border.dashType">title.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.</p>

<h3 id="configuration-title.border.width">
<a href="#configuration-title.border.width">title.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-title.font">
<a href="#configuration-title.font">title.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "16px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The font of the title.</p>

<h3 id="configuration-title.color">
<a href="#configuration-title.color">title.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the title. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-title.margin">
<a href="#configuration-title.margin">title.margin </a><code>Number  |</code><code> Object</code><em>(default: 5)</em>
</h3>

<p>The margin of the title.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    $("#chart").kendoChart({
        // sets the top, right, bottom and left margin to 3px.
        title: {
            margin: 3
        },
        //...
    });
    //
    $("#chart").kendoChart({
        // sets the top and left margin to 1px
        // margin right and bottom are with 5px (by default)
        title: {
            margin: { top: 1, left: 1 }
        },
        //...
    });
</code></pre>

<h3 id="configuration-title.padding">
<a href="#configuration-title.padding">title.padding </a><code>Number  |</code><code> Object</code><em>(default: 5)</em>
</h3>

<p>The padding of the title.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    $("#chart").kendoChart({
        // sets the top, right, bottom and left padding to 3px.
        title: {
            padding: 3
        },
        //...
    });

    $("#chart").kendoChart({
        // sets the top and left padding to 1px
        // padding right and bottom are with 5px (by default)
        title: {
            padding: { top: 1, left: 1 }
        },
        //...
    });
</code></pre>

<h3 id="configuration-title.position">
<a href="#configuration-title.position">title.position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "top")</em>
</h3>

<p>The position of the title.</p>

<h4><em>"top"</em></h4>

<p>The title is positioned on the top.</p>

<h4><em>"bottom"</em></h4>

<p>The title is positioned on the bottom.</p>

<h3 id="configuration-title.text">
<a href="#configuration-title.text">title.text </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The title of the chart. You can also set the text directly for a title with default options.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    $("#chart ").kendoChart({
        title: {
            text: "Sales data"
        },
        //...
    });

    $("#chart ").kendoChart({
        title: "Sales data",
        //...
    });
</code></pre>

<h3 id="configuration-title.visible">
<a href="#configuration-title.visible">title.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>The visibility of the title.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    $("#chart ").kendoChart({
        title: {
            // hides the title
            visible: false
        },
        //...
    });
</code></pre>

<h3 id="configuration-tooltip">
<a href="#configuration-tooltip">tooltip </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The data point tooltip configuration options.</p>

<h3 id="configuration-tooltip.background">
<a href="#configuration-tooltip.background">tooltip.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the tooltip. The default is determined from the series color.</p>

<h3 id="configuration-tooltip.border">
<a href="#configuration-tooltip.border">tooltip.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border configuration options.</p>

<h3 id="configuration-tooltip.border.color">
<a href="#configuration-tooltip.border.color">tooltip.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border.</p>

<h3 id="configuration-tooltip.border.width">
<a href="#configuration-tooltip.border.width">tooltip.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-tooltip.color">
<a href="#configuration-tooltip.color">tooltip.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the tooltip. The default is the same as the series labels color.</p>

<h3 id="configuration-tooltip.font">
<a href="#configuration-tooltip.font">tooltip.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "12px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The tooltip font.</p>

<h3 id="configuration-tooltip.format">
<a href="#configuration-tooltip.format">tooltip.format </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The tooltip format.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    //sets format of the tooltip
    format: "C"
</code></pre>

<h3 id="configuration-tooltip.padding">
<a href="#configuration-tooltip.padding">tooltip.padding </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The padding of the tooltip.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    // sets the top, right, bottom and left padding to 3px.
    padding: 3

    // sets the top and left padding to 1px
    // right and bottom padding are left at their default values
    padding: { top: 1, left: 1 }
</code></pre>

<h3 id="configuration-tooltip.template">
<a href="#configuration-tooltip.template">tooltip.template </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The tooltip template.
Template variables:</p>

<ul>
<li>  <strong>value</strong> - the point value</li>
<li>  <strong>category</strong> - the category name</li>
<li>  <strong>series</strong> - the data series</li>
<li>  <strong>dataItem</strong> - the original data item used to construct the point.
    Will be null if binding to array.</li>
</ul>

<h4>Example</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
     title: {
         text: "My Chart Title"
     },
     series: [{
         name: "Series 1",
         data: [200, 450, 300, 125]
     }],
     categoryAxis: {
         categories: [2000, 2001, 2002, 2003]
     },
     tooltip: {
         visible: true,
         template: "#= category # - #= value #"
     }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-tooltip.visible">
<a href="#configuration-tooltip.visible">tooltip.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>A value indicating if the tooltip should be displayed.</p>

<h3 id="configuration-tooltip.shared">
<a href="#configuration-tooltip.shared">tooltip.shared </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>A value indicating if the tooltip should be shared.</p>

<h3 id="configuration-tooltip.sharedTemplate">
<a href="#configuration-tooltip.sharedTemplate">tooltip.sharedTemplate </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The shared tooltip template.
Template variables:</p>

<ul>
<li>  <strong>points</strong> - the category points</li>
<li>  <strong>category</strong> - the category name</li>
</ul>

<h4>Example</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
     title: {
         text: "Internet Users"
     },
     series: [{
         name: "United States",
         data: [67.96, 68.93, 75, 74, 78]
     }, {
         name: "World",
         data: [15.7, 16.7, 20, 23.5, 26.6]
     }],
     categoryAxis: {
         categories: [2005, 2006, 2007, 2008, 2009]
     },
     tooltip: {
         visible: true,
         shared: true,
         sharedTemplate:
            "#= category # &lt;/br&gt;" +
            "# for (var i = 0; i &lt; points.length; i++) { #" +
                "#= points[i].series.name #: #= points[i].value # &lt;/br&gt;" +
            "# } #"
     }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-transitions">
<a href="#configuration-transitions">transitions </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: true)</em>
</h3>

<p>A value indicating if transition animations should be played.</p>

<h3 id="configuration-valueAxis">
<a href="#configuration-valueAxis">valueAxis </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>The value axis configuration options.</p>

<h3 id="configuration-valueAxis.axisCrossingValue">
<a href="#configuration-valueAxis.axisCrossingValue">valueAxis.axisCrossingValue </a><code>Object  |</code><code> Date  |</code><code> Array</code>
</h3>

<p>Value at which the category axis crosses this axis. (Only for object)</p>

<p>Value indicies at which the category axes cross the value axis. (Only for array)</p>

<p>Date at which the category axis crosses this axis. (Only for date)</p>

<h3 id="configuration-valueAxis.background">
<a href="#configuration-valueAxis.background">valueAxis.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the axis.</p>

<h3 id="configuration-valueAxis.color">
<a href="#configuration-valueAxis.color">valueAxis.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>Color to apply to all axis elements.
Individual color settings for line and labels take priority. Any valid CSS color string will work here, including hex and rgb.</p>

<h3 id="configuration-valueAxis.labels">
<a href="#configuration-valueAxis.labels">valueAxis.labels </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Configures the axis labels.</p>

<h3 id="configuration-valueAxis.labels.background">
<a href="#configuration-valueAxis.labels.background">valueAxis.labels.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the labels. Any valid CSS color string will work here, including
hex and rgb</p>

<h3 id="configuration-valueAxis.labels.border">
<a href="#configuration-valueAxis.labels.border">valueAxis.labels.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the labels.</p>

<h3 id="configuration-valueAxis.labels.border.color">
<a href="#configuration-valueAxis.labels.border.color">valueAxis.labels.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border. Any valid CSS color string will work here, including
hex and rgb.</p>

<h3 id="configuration-valueAxis.labels.border.dashType">
<a href="#configuration-valueAxis.labels.border.dashType">valueAxis.labels.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.</p>

<h3 id="configuration-valueAxis.labels.border.width">
<a href="#configuration-valueAxis.labels.border.width">valueAxis.labels.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-valueAxis.labels.color">
<a href="#configuration-valueAxis.labels.color">valueAxis.labels.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the labels. Any valid CSS color string will work here, including hex and rgb.</p>

<h3 id="configuration-valueAxis.labels.font">
<a href="#configuration-valueAxis.labels.font">valueAxis.labels.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "12px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The font style of the labels.</p>

<h3 id="configuration-valueAxis.labels.format">
<a href="#configuration-valueAxis.labels.format">valueAxis.labels.format </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The format of the labels.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    $("#chart").kendoChart({
        valueAxis: {
           labels: {
               // set the format to currency
               format: "C"
           }
        },
        //...
    });
</code></pre>

<h3 id="configuration-valueAxis.labels.margin">
<a href="#configuration-valueAxis.labels.margin">valueAxis.labels.margin </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a><em>(default: 0)</em>
</h3>

<p>The margin of the labels.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    // sets the top, right, bottom and left margin to 3px.
    margin: 3

    // sets the top and left margin to 1px
    // margin right and bottom are with 0px (by default)
    margin: { top: 1, left: 1 }
</code></pre>

<h3 id="configuration-valueAxis.labels.mirror">
<a href="#configuration-valueAxis.labels.mirror">valueAxis.labels.mirror </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a>
</h3>

<p>Mirrors the axis labels and ticks.
If the labels are normally on the left side of the axis,
mirroring the axis will render them to the right.</p>

<h3 id="configuration-valueAxis.labels.padding">
<a href="#configuration-valueAxis.labels.padding">valueAxis.labels.padding </a><code>Number  |</code><code> Object</code><em>(default: 0)</em>
</h3>

<p>The padding of the labels.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    // sets the top, right, bottom and left padding to 3px.
    padding: 3

    // sets the top and left padding to 1px
    // padding right and bottom are with 0px (by default)
    padding: { top: 1, left: 1 }
</code></pre>

<h3 id="configuration-valueAxis.labels.rotation">
<a href="#configuration-valueAxis.labels.rotation">valueAxis.labels.rotation </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The rotation angle of the labels.</p>

<h3 id="configuration-valueAxis.labels.skip">
<a href="#configuration-valueAxis.labels.skip">valueAxis.labels.skip </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 1)</em>
</h3>

<p>Number of labels to skip.
Skips rendering the first n labels.</p>

<h3 id="configuration-valueAxis.labels.step">
<a href="#configuration-valueAxis.labels.step">valueAxis.labels.step </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 1)</em>
</h3>

<p>Label rendering step.
Every n-th label is rendered where n is the step</p>

<h3 id="configuration-valueAxis.labels.template">
<a href="#configuration-valueAxis.labels.template">valueAxis.labels.template </a><code>String  |</code><code> Function</code>
</h3>

<p>The label template.
Template variables:</p>

<ul>
<li>  <strong>value</strong> - the value</li>
</ul>

<h4>Example</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
// chart initialization
$("#chart").kendoChart({
     title: {
         text: "My Chart Title"
     },
     series: [
         {
             name: "Series 1",
             data: [200, 450, 300, 125]
         }
     ],
     categoryAxis: {
         categories: [2000, 2001, 2002, 2003]
     },
     valueAxis: {
         labels: {
             // labels template
             template: "#= value #%"
         }
     }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.labels.visible">
<a href="#configuration-valueAxis.labels.visible">valueAxis.labels.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: true)</em>
</h3>

<p>The visibility of the labels.</p>

<h3 id="configuration-valueAxis.line">
<a href="#configuration-valueAxis.line">valueAxis.line </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Configures the axis line. This will also affect the major and minor ticks, but not the grid lines.</p>

<h3 id="configuration-valueAxis.line.color">
<a href="#configuration-valueAxis.line.color">valueAxis.line.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the line. This will also effect the major and minor ticks, but
not the grid lines.</p>

<h3 id="configuration-valueAxis.line.dashType">
<a href="#configuration-valueAxis.line.dashType">valueAxis.line.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of the line.</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.</p>

<h3 id="configuration-valueAxis.line.visible">
<a href="#configuration-valueAxis.line.visible">valueAxis.line.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: true)</em>
</h3>

<p>The visibility of the line.</p>

<h3 id="configuration-valueAxis.line.width">
<a href="#configuration-valueAxis.line.width">valueAxis.line.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 1)</em>
</h3>

<p>The width of the line. This will also effect the major and minor ticks, but
not the grid lines.</p>

<h3 id="configuration-valueAxis.majorGridLines">
<a href="#configuration-valueAxis.majorGridLines">valueAxis.majorGridLines </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Configures the major grid lines. These are the lines that are an extension of the major ticks through the
body of the chart.</p>

<h3 id="configuration-valueAxis.majorGridLines.color">
<a href="#configuration-valueAxis.majorGridLines.color">valueAxis.majorGridLines.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the lines.</p>

<h3 id="configuration-valueAxis.majorGridLines.visible">
<a href="#configuration-valueAxis.majorGridLines.visible">valueAxis.majorGridLines.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: true)</em>
</h3>

<p>The visibility of the lines.</p>

<h3 id="configuration-valueAxis.majorGridLines.width">
<a href="#configuration-valueAxis.majorGridLines.width">valueAxis.majorGridLines.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 1)</em>
</h3>

<p>The width of the lines.</p>

<h3 id="configuration-valueAxis.majorGridLines.step">
<a href="#configuration-valueAxis.majorGridLines.step">valueAxis.majorGridLines.step </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>The step of the value axis major grid lines.</p>

<h3 id="configuration-valueAxis.majorGridLines.skip">
<a href="#configuration-valueAxis.majorGridLines.skip">valueAxis.majorGridLines.skip </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The skip of the value axis major grid lines.</p>

<h3 id="configuration-valueAxis.majorTicks">
<a href="#configuration-valueAxis.majorTicks">valueAxis.majorTicks </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The major ticks of the axis.</p>

<h3 id="configuration-valueAxis.majorTicks.size">
<a href="#configuration-valueAxis.majorTicks.size">valueAxis.majorTicks.size </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 4)</em>
</h3>

<p>The axis major tick size. This is the length of the line in pixels that is drawn to indicate the tick on the chart.</p>

<h3 id="configuration-valueAxis.majorTicks.visible">
<a href="#configuration-valueAxis.majorTicks.visible">valueAxis.majorTicks.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: true)</em>
</h3>

<p>The visibility of the major ticks.</p>

<h3 id="configuration-valueAxis.majorTicks.color">
<a href="#configuration-valueAxis.majorTicks.color">valueAxis.majorTicks.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "black")</em>
</h3>

<p>The color of the value axis major ticks lines. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-valueAxis.majorTicks.width">
<a href="#configuration-valueAxis.majorTicks.width">valueAxis.majorTicks.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>The width of the major ticks in pixels.</p>

<h3 id="configuration-valueAxis.majorTicks.step">
<a href="#configuration-valueAxis.majorTicks.step">valueAxis.majorTicks.step </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>The step of the value axis major ticks.</p>

<h3 id="configuration-valueAxis.majorTicks.skip">
<a href="#configuration-valueAxis.majorTicks.skip">valueAxis.majorTicks.skip </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The skip of the value axis major ticks.</p>

<h3 id="configuration-valueAxis.majorUnit">
<a href="#configuration-valueAxis.majorUnit">valueAxis.majorUnit </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The interval between major divisions.</p>

<h3 id="configuration-valueAxis.max">
<a href="#configuration-valueAxis.max">valueAxis.max </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 1)</em>
</h3>

<p>The maximum value of the axis.
This is often used in combination with the <strong>min</strong> configuration option.</p>

<h3 id="configuration-valueAxis.min">
<a href="#configuration-valueAxis.min">valueAxis.min </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The minimum value of the axis.
This is often used in combination with the <strong>max</strong> configuration option.</p>

<h3 id="configuration-valueAxis.minorGridLines">
<a href="#configuration-valueAxis.minorGridLines">valueAxis.minorGridLines </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Configures the minor grid lines.  These are the lines that are an extension of the minor ticks through the</p>

<h3 id="configuration-valueAxis.minorGridLines.color">
<a href="#configuration-valueAxis.minorGridLines.color">valueAxis.minorGridLines.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the lines.</p>

<p>Note that this has no effect if the visibility of the minor grid lines is not set to <strong>true</strong>.</p>

<h3 id="configuration-valueAxis.minorGridLines.dashType">
<a href="#configuration-valueAxis.minorGridLines.dashType">valueAxis.minorGridLines.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of the minor grid lines.</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.
body of the chart.</p>

<p>Note that minor grid lines are not visible by default, therefore none of these settings will take effect without the minor grid lines visibility being set to <strong>true</strong>.</p>

<h3 id="configuration-valueAxis.minorGridLines.visible">
<a href="#configuration-valueAxis.minorGridLines.visible">valueAxis.minorGridLines.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>The visibility of the lines.</p>

<h3 id="configuration-valueAxis.minorGridLines.width">
<a href="#configuration-valueAxis.minorGridLines.width">valueAxis.minorGridLines.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 1)</em>
</h3>

<p>The width of the lines.</p>

<p>Note that this settings has no effect if the visibility of the minor grid lines is not set to <strong>true</strong>.</p>

<h3 id="configuration-valueAxis.minorGridLines.step">
<a href="#configuration-valueAxis.minorGridLines.step">valueAxis.minorGridLines.step </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>The step of the value axis minor grid lines.</p>

<h3 id="configuration-valueAxis.minorGridLines.skip">
<a href="#configuration-valueAxis.minorGridLines.skip">valueAxis.minorGridLines.skip </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The skip of the value axis minor grid lines.</p>

<h3 id="configuration-valueAxis.minorTicks">
<a href="#configuration-valueAxis.minorTicks">valueAxis.minorTicks </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The minor ticks of the axis.</p>

<h3 id="configuration-valueAxis.minorTicks.size">
<a href="#configuration-valueAxis.minorTicks.size">valueAxis.minorTicks.size </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 3)</em>
</h3>

<p>The axis minor tick size. This is the length of the line in pixels that is drawn to indicate the tick on the chart.</p>

<h3 id="configuration-valueAxis.minorTicks.color">
<a href="#configuration-valueAxis.minorTicks.color">valueAxis.minorTicks.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "black")</em>
</h3>

<p>The color of the value axis minor ticks lines. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-valueAxis.minorTicks.width">
<a href="#configuration-valueAxis.minorTicks.width">valueAxis.minorTicks.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>The width of the minor ticks in pixels.</p>

<h3 id="configuration-valueAxis.minorTicks.visible">
<a href="#configuration-valueAxis.minorTicks.visible">valueAxis.minorTicks.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>The visibility of the minor ticks.</p>

<h3 id="configuration-valueAxis.minorTicks.step">
<a href="#configuration-valueAxis.minorTicks.step">valueAxis.minorTicks.step </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>The step of the value axis minor ticks.</p>

<h3 id="configuration-valueAxis.minorTicks.skip">
<a href="#configuration-valueAxis.minorTicks.skip">valueAxis.minorTicks.skip </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The skip of the value axis minor ticks.</p>

<h3 id="configuration-valueAxis.minorUnit">
<a href="#configuration-valueAxis.minorUnit">valueAxis.minorUnit </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The interval between minor divisions.
It defaults to 1/5th of the majorUnit.</p>

<h3 id="configuration-valueAxis.name">
<a href="#configuration-valueAxis.name">valueAxis.name </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a><em>(default: "primary")</em>
</h3>

<p>The unique axis name.</p>

<h3 id="configuration-valueAxis.narrowRange">
<a href="#configuration-valueAxis.narrowRange">valueAxis.narrowRange </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>Prevents the automatic axis range from snapping to 0.</p>

<h3 id="configuration-valueAxis.pane">
<a href="#configuration-valueAxis.pane">valueAxis.pane </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The name of the pane that the axis should be rendered in.
The axis will be rendered in the first (default) pane if not set.</p>

<h3 id="configuration-valueAxis.plotBands">
<a href="#configuration-valueAxis.plotBands">valueAxis.plotBands </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>The plot bands of the value axis.</p>

<h3 id="configuration-valueAxis.plotBands.from">
<a href="#configuration-valueAxis.plotBands.from">valueAxis.plotBands.from </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The start position of the plot band in axis units.</p>

<h3 id="configuration-valueAxis.plotBands.to">
<a href="#configuration-valueAxis.plotBands.to">valueAxis.plotBands.to </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The end position of the plot band in axis units.</p>

<h3 id="configuration-valueAxis.plotBands.color">
<a href="#configuration-valueAxis.plotBands.color">valueAxis.plotBands.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The color of the plot band.</p>

<h3 id="configuration-valueAxis.plotBands.opacity">
<a href="#configuration-valueAxis.plotBands.opacity">valueAxis.plotBands.opacity </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The opacity of the plot band.</p>

<h3 id="configuration-valueAxis.reverse">
<a href="#configuration-valueAxis.reverse">valueAxis.reverse </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>Reverses the axis direction -
values increase from right to left and from top to bottom.</p>

<h3 id="configuration-valueAxis.title">
<a href="#configuration-valueAxis.title">valueAxis.title </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The title of the value axis.</p>

<h3 id="configuration-valueAxis.title.background">
<a href="#configuration-valueAxis.title.background">valueAxis.title.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the title. Any valid CSS color string will work here, including
hex and rgb.</p>

<h3 id="configuration-valueAxis.title.border">
<a href="#configuration-valueAxis.title.border">valueAxis.title.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the title.</p>

<h3 id="configuration-valueAxis.title.border.color">
<a href="#configuration-valueAxis.title.border.color">valueAxis.title.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border.</p>

<h3 id="configuration-valueAxis.title.border.dashType">
<a href="#configuration-valueAxis.title.border.dashType">valueAxis.title.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.</p>

<h3 id="configuration-valueAxis.title.border.width">
<a href="#configuration-valueAxis.title.border.width">valueAxis.title.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-valueAxis.title.color">
<a href="#configuration-valueAxis.title.color">valueAxis.title.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the title. Any valid CSS color string will work here, including hex and rgb.</p>

<h3 id="configuration-valueAxis.title.font">
<a href="#configuration-valueAxis.title.font">valueAxis.title.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "16px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The font style of the title.</p>

<h3 id="configuration-valueAxis.title.margin">
<a href="#configuration-valueAxis.title.margin">valueAxis.title.margin </a><code>Number  |</code><code> Object</code><em>(default: 5)</em>
</h3>

<p>The margin of the title.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    // sets the top, right, bottom and left margin to 3px.
    margin: 3

    // sets the top and left margin to 1px
    // margin right and bottom are with 0px (by default)
    margin: { top: 1, left: 1 }
</code></pre>

<h3 id="configuration-valueAxis.title.padding">
<a href="#configuration-valueAxis.title.padding">valueAxis.title.padding </a><code>Number  |</code><code> Object</code><em>(default: 0)</em>
</h3>

<p>The padding of the title.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    // sets the top, right, bottom and left padding to 3px.
    padding: 3

    // sets the top and left padding to 1px
    // padding right and bottom are with 0px (by default)
    padding: { top: 1, left: 1 }
</code></pre>

<h3 id="configuration-valueAxis.title.position">
<a href="#configuration-valueAxis.title.position">valueAxis.title.position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "center")</em>
</h3>

<p>The position of the title.</p>

<h4><em>"top"</em></h4>

<p>The axis title is positioned on the top (applicable to vertical axis).</p>

<h4><em>"bottom"</em></h4>

<p>The axis title is positioned on the bottom (applicable to vertical axis).</p>

<h4><em>"left"</em></h4>

<p>The axis title is positioned on the left (applicable to horizontal axis).</p>

<h4><em>"right"</em></h4>

<p>"The axis title is positioned on the right (applicable to horizontal axis).</p>

<h4><em>"center"</em></h4>

<p>"The axis title is positioned in the center.</p>

<h3 id="configuration-valueAxis.title.rotation">
<a href="#configuration-valueAxis.title.rotation">valueAxis.title.rotation </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The rotation angle of the title.</p>

<h3 id="configuration-valueAxis.title.text">
<a href="#configuration-valueAxis.title.text">valueAxis.title.text </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text of the title.</p>

<h3 id="configuration-valueAxis.title.visible">
<a href="#configuration-valueAxis.title.visible">valueAxis.title.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: true)</em>
</h3>

<p>The visibility of the title.</p>

<h3 id="configuration-valueAxis.visible">
<a href="#configuration-valueAxis.visible">valueAxis.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: true)</em>
</h3>

<p>The visibility of the axis.</p>

<h3 id="configuration-valueAxis.crosshair">
<a href="#configuration-valueAxis.crosshair">valueAxis.crosshair </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The crosshair configuration options.</p>

<h3 id="configuration-valueAxis.crosshair.color">
<a href="#configuration-valueAxis.crosshair.color">valueAxis.crosshair.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The color of the crosshair.</p>

<h3 id="configuration-valueAxis.crosshair.width">
<a href="#configuration-valueAxis.crosshair.width">valueAxis.crosshair.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The width of the crosshair.</p>

<h3 id="configuration-valueAxis.crosshair.opacity">
<a href="#configuration-valueAxis.crosshair.opacity">valueAxis.crosshair.opacity </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The opacity of the crosshair.</p>

<h3 id="configuration-valueAxis.crosshair.dashType">
<a href="#configuration-valueAxis.crosshair.dashType">valueAxis.crosshair.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The dash type of the crosshair.</p>

<h3 id="configuration-valueAxis.crosshair.visible">
<a href="#configuration-valueAxis.crosshair.visible">valueAxis.crosshair.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>The dash type of the crosshair.</p>

<h3 id="configuration-valueAxis.crosshair.tooltip">
<a href="#configuration-valueAxis.crosshair.tooltip">valueAxis.crosshair.tooltip </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The crosshair tooltip configuration options.</p>

<h3 id="configuration-valueAxis.crosshair.tooltip.background">
<a href="#configuration-valueAxis.crosshair.tooltip.background">valueAxis.crosshair.tooltip.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the tooltip.</p>

<h3 id="configuration-valueAxis.crosshair.tooltip.border">
<a href="#configuration-valueAxis.crosshair.tooltip.border">valueAxis.crosshair.tooltip.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border configuration options.</p>

<h3 id="configuration-valueAxis.crosshair.tooltip.border.color">
<a href="#configuration-valueAxis.crosshair.tooltip.border.color">valueAxis.crosshair.tooltip.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border.</p>

<h3 id="configuration-valueAxis.crosshair.tooltip.border.width">
<a href="#configuration-valueAxis.crosshair.tooltip.border.width">valueAxis.crosshair.tooltip.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-valueAxis.crosshair.tooltip.color">
<a href="#configuration-valueAxis.crosshair.tooltip.color">valueAxis.crosshair.tooltip.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the tooltip.</p>

<h3 id="configuration-valueAxis.crosshair.tooltip.font">
<a href="#configuration-valueAxis.crosshair.tooltip.font">valueAxis.crosshair.tooltip.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "12px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The tooltip font.</p>

<h3 id="configuration-valueAxis.crosshair.tooltip.format">
<a href="#configuration-valueAxis.crosshair.tooltip.format">valueAxis.crosshair.tooltip.format </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The tooltip format.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    //sets format of the tooltip
    format: "C"
</code></pre>

<h3 id="configuration-valueAxis.crosshair.tooltip.padding">
<a href="#configuration-valueAxis.crosshair.tooltip.padding">valueAxis.crosshair.tooltip.padding </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The padding of the tooltip.</p>

<h4>Example</h4>

<pre data-lang="pseudo"><code>    // sets the top, right, bottom and left padding to 3px.
    padding: 3

    // sets the top and left padding to 1px
    // right and bottom padding are left at their default values
    padding: { top: 1, left: 1 }
</code></pre>

<h3 id="configuration-valueAxis.crosshair.tooltip.template">
<a href="#configuration-valueAxis.crosshair.tooltip.template">valueAxis.crosshair.tooltip.template </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The tooltip template.
Template variables:</p>

<ul>
<li>  <strong>value</strong> - the point value (either a number or an object)</li>
</ul>

<h4>Example</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
// chart initialization
$("#chart").kendoChart({
     title: {
         text: "My Chart Title"
     },
     series: [{
             name: "Series 1",
             data: [200, 450, 300, 125]
     }],
     categoryAxis: {
         categories: [2000, 2001, 2002, 2003]
     },
     valueAxis: {
         crosshair: {
             visible: true,
             tooltip: {
                 visible: true,
                 template: "value: #= value #"
             }
         }
     }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.crosshair.tooltip.visible">
<a href="#configuration-valueAxis.crosshair.tooltip.visible">valueAxis.crosshair.tooltip.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>A value indicating if the tooltip should be displayed.</p>

<h3 id="configuration-valueAxis.notes">
<a href="#configuration-valueAxis.notes">valueAxis.notes </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The value axis notes configuration.</p>

<h3 id="configuration-valueAxis.notes.position">
<a href="#configuration-valueAxis.notes.position">valueAxis.notes.position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The position of the value axis note.</p>

<ul>
<li>"top" - The note is positioned on the top.</li>
<li>"bottom" - The note is positioned on the bottom.</li>
<li>"left" - The note is positioned on the left.</li>
<li>"right" - The note is positioned on the right.</li>
</ul>

<h3 id="configuration-valueAxis.notes.icon">
<a href="#configuration-valueAxis.notes.icon">valueAxis.notes.icon </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The icon of the notes.</p>

<h3 id="configuration-valueAxis.notes.icon.background">
<a href="#configuration-valueAxis.notes.icon.background">valueAxis.notes.icon.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the notes icon.</p>

<h4>Example - set the value axis notes icon background</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      icon: {
        background: "red"
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.icon.border">
<a href="#configuration-valueAxis.notes.icon.border">valueAxis.notes.icon.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the icon.</p>

<h4>Example - set the value axis notes icon border</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      icon: {
        border: {
          width: 2,
          color: "red"
        }
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.icon.border.color">
<a href="#configuration-valueAxis.notes.icon.border.color">valueAxis.notes.icon.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The border color of the icon.</p>

<h4>Example - set the value axis notes icon border color</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      icon: {
        border: {
          width: 2,
          color: "red"
        }
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.icon.border.width">
<a href="#configuration-valueAxis.notes.icon.border.width">valueAxis.notes.icon.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The border width of the icon.</p>

<h4>Example - set the value axis notes icon border width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      icon: {
        border: {
          width: 2,
          color: "red"
        }
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.icon.size">
<a href="#configuration-valueAxis.notes.icon.size">valueAxis.notes.icon.size </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The size of the icon.</p>

<h4>Example - set the value axis notes icon size</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      icon: {
        size: 30
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.icon.type">
<a href="#configuration-valueAxis.notes.icon.type">valueAxis.notes.icon.type </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "circle")</em>
</h3>

<p>The icon shape.</p>

<p>The supported values are:</p>

<ul>
<li>"circle" - the marker shape is circle.</li>
<li>"square" - the marker shape is square.</li>
<li>"triangle" - the marker shape is triangle.</li>
<li>"cross" - the marker shape is cross.</li>
</ul>

<h4>Example - set the value axis notes icon shape</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      icon: {
        shape: "triangle"
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.icon.visible">
<a href="#configuration-valueAxis.notes.icon.visible">valueAxis.notes.icon.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: "true")</em>
</h3>

<p>The icon visibility.</p>

<h4>Example - set the value axis notes icon visibility</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      icon: {
        visible: false
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.label">
<a href="#configuration-valueAxis.notes.label">valueAxis.notes.label </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The label of the notes.</p>

<h3 id="configuration-valueAxis.notes.label.background">
<a href="#configuration-valueAxis.notes.label.background">valueAxis.notes.label.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the label. Accepts a valid CSS color string, including hex and rgb.</p>

<h4>Example - set the value axis label background</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      label: {
        background: "red"
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.label.border">
<a href="#configuration-valueAxis.notes.label.border">valueAxis.notes.label.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the label.</p>

<h4>Example - set the value axis label border</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      label: {
        border: {
          color: "green",
          dashType: "dashDot",
          width: 1
        }
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.label.border.color">
<a href="#configuration-valueAxis.notes.label.border.color">valueAxis.notes.label.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "black")</em>
</h3>

<p>The color of the border. Accepts a valid CSS color string, including hex and rgb.</p>

<h4>Example - set the value axis label border color</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      label: {
        border: {
          color: "green"
        }
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.label.border.dashType">
<a href="#configuration-valueAxis.notes.label.border.dashType">valueAxis.notes.label.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<p>The following dash types are supported:</p>

<ul>
<li>"dash" - a line consisting of dashes</li>
<li>"dashDot" - a line consisting of a repeating pattern of dash-dot</li>
<li>"dot" - a line consisting of dots</li>
<li>"longDash" - a line consisting of a repeating pattern of long-dash</li>
<li>"longDashDot" - a line consisting of a repeating pattern of long-dash-dot</li>
<li>"longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot</li>
<li>"solid" - a solid line</li>
</ul>

<h4>Example - set the value axis label border dash type</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      label: {
        border: {
          dashType: "dashDot",
          width: 1
        }
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.label.border.width">
<a href="#configuration-valueAxis.notes.label.border.width">valueAxis.notes.label.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.</p>

<h4>Example - set the value axis label border width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      label: {
        border: {
          width: 1
        }
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.label.color">
<a href="#configuration-valueAxis.notes.label.color">valueAxis.notes.label.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the label. Accepts a valid CSS color string, including hex and rgb.</p>

<h4>Example - set the value axis label color as a hex string</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      label: {
        color: "#aa00bb"
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.label.font">
<a href="#configuration-valueAxis.notes.label.font">valueAxis.notes.label.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "12px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The font style of the label.</p>

<h4>Example - set the chart series label font</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      label: {
        font: "20px sans-serif"
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.label.template">
<a href="#configuration-valueAxis.notes.label.template">valueAxis.notes.label.template </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The <a href="/api/framework/kendo#methods-template">template</a> which renders the labels.</p>

<p>The fields which can be used in the template are:</p>

<ul>
<li>value - the value value</li>
</ul>

<h4>Example - set the value axis notes label template as a string</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      label: {
        template: "Year: #: value #"
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.label.visible">
<a href="#configuration-valueAxis.notes.label.visible">valueAxis.notes.label.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: true)</em>
</h3>

<p>If set to <code>true</code> the chart will display the value axis notes label. By default the value axis notes label are visible.</p>

<h4>Example - hide the value axis notes label</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      label: {
        visible: false
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.label.rotation">
<a href="#configuration-valueAxis.notes.label.rotation">valueAxis.notes.label.rotation </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The rotation angle of the label. By default the label are not rotated.</p>

<h4>Example - rotate the value axis notes label</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      label: {
        rotation: 90
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.label.format">
<a href="#configuration-valueAxis.notes.label.format">valueAxis.notes.label.format </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "{0}")</em>
</h3>

<p>The format used to display the notes label. Uses <a href="/api/framework/kendo#methods-format">kendo.format</a>. Contains one placeholder ("{0}") which represents the axis value.</p>

<h4>Example - set the value axis notes label format</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      label: {
        format: "value slot: {0}"
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.label.position">
<a href="#configuration-valueAxis.notes.label.position">valueAxis.notes.label.position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "inside")</em>
</h3>

<p>The position of the labels.</p>

<ul>
<li>"inside" - the label is positioned inside of the icon.</li>
<li>"outside" - the label is positioned outside of the icon.</li>
</ul>

<h3 id="configuration-valueAxis.notes.line">
<a href="#configuration-valueAxis.notes.line">valueAxis.notes.line </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The line of the notes.</p>

<h3 id="configuration-valueAxis.notes.line.width">
<a href="#configuration-valueAxis.notes.line.width">valueAxis.notes.line.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The line width of the notes.</p>

<h4>Example - set the value axis notes line width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      line: {
        width: 4
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.line.color">
<a href="#configuration-valueAxis.notes.line.color">valueAxis.notes.line.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The line color of the notes.</p>

<h4>Example - set the value axis notes color width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      line: {
        color: "#aa00bb"
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.line.length">
<a href="#configuration-valueAxis.notes.line.length">valueAxis.notes.line.length </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The length of the connecting lines in pixels.</p>

<h4>Example - set the value axis notes color width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      line: {
        length: 20
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data">
<a href="#configuration-valueAxis.notes.data">valueAxis.notes.data </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>The items of the notes.</p>

<h3 id="configuration-valueAxis.notes.data.value">
<a href="#configuration-valueAxis.notes.data.value">valueAxis.notes.data.value </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The value of the note.</p>

<h3 id="configuration-valueAxis.notes.data.position">
<a href="#configuration-valueAxis.notes.data.position">valueAxis.notes.data.position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The position of the value axis note.</p>

<ul>
<li>"top" - The note is positioned on the top.</li>
<li>"bottom" - The note is positioned on the bottom.</li>
<li>"left" - The note is positioned on the left.</li>
<li>"right" - The note is positioned on the right.</li>
</ul>

<h3 id="configuration-valueAxis.notes.data.icon">
<a href="#configuration-valueAxis.notes.data.icon">valueAxis.notes.data.icon </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The icon of the note.</p>

<h3 id="configuration-valueAxis.notes.data.icon.background">
<a href="#configuration-valueAxis.notes.data.icon.background">valueAxis.notes.data.icon.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the note icon.</p>

<h4>Example - set the value axis note icon background</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          background: "red"
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.icon.border">
<a href="#configuration-valueAxis.notes.data.icon.border">valueAxis.notes.data.icon.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the icon.</p>

<h4>Example - set the value axis note icon border</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          border: {
            width: 2,
            color: "red"
          }
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.icon.border.color">
<a href="#configuration-valueAxis.notes.data.icon.border.color">valueAxis.notes.data.icon.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The border color of the icon.</p>

<h4>Example - set the value axis note icon border color</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          border: {
            width: 2,
            color: "red"
          }
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.icon.border.width">
<a href="#configuration-valueAxis.notes.data.icon.border.width">valueAxis.notes.data.icon.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The border width of the icon.</p>

<h4>Example - set the value axis note icon border width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          border: {
            width: 2,
            color: "red"
          }
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.icon.size">
<a href="#configuration-valueAxis.notes.data.icon.size">valueAxis.notes.data.icon.size </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The size of the icon.</p>

<h4>Example - set the value axis note icon size</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          size: 30
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.icon.type">
<a href="#configuration-valueAxis.notes.data.icon.type">valueAxis.notes.data.icon.type </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "circle")</em>
</h3>

<p>The icon shape.</p>

<p>The supported values are:</p>

<ul>
<li>"circle" - the marker shape is circle.</li>
<li>"square" - the marker shape is square.</li>
<li>"triangle" - the marker shape is triangle.</li>
<li>"cross" - the marker shape is cross.</li>
</ul>

<h4>Example - set the value axis note icon shape</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          shape: "triangle"
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.icon.visible">
<a href="#configuration-valueAxis.notes.data.icon.visible">valueAxis.notes.data.icon.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: "true")</em>
</h3>

<p>The icon visibility.</p>

<h4>Example - set the value axis note icon visibility</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          visible: false
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.label">
<a href="#configuration-valueAxis.notes.data.label">valueAxis.notes.data.label </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The label of the note.</p>

<h3 id="configuration-valueAxis.notes.data.label.background">
<a href="#configuration-valueAxis.notes.data.label.background">valueAxis.notes.data.label.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the label. Accepts a valid CSS color string, including hex and rgb.</p>

<h4>Example - set the value axis note label background</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notesdata {
      data: [{
        value: 1,
        label: {
          background: "red"
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.label.border">
<a href="#configuration-valueAxis.notes.data.label.border">valueAxis.notes.data.label.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the label.</p>

<h4>Example - set the value axis note label border</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          border: {
            color: "green",
            dashType: "dashDot",
            width: 1
          }
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.label.border.color">
<a href="#configuration-valueAxis.notes.data.label.border.color">valueAxis.notes.data.label.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "black")</em>
</h3>

<p>The color of the border. Accepts a valid CSS color string, including hex and rgb.</p>

<h4>Example - set the value axis note label border color</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          border: {
            color: "green"
          }
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.label.border.dashType">
<a href="#configuration-valueAxis.notes.data.label.border.dashType">valueAxis.notes.data.label.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<p>The following dash types are supported:</p>

<ul>
<li>"dash" - a line consisting of dashes</li>
<li>"dashDot" - a line consisting of a repeating pattern of dash-dot</li>
<li>"dot" - a line consisting of dots</li>
<li>"longDash" - a line consisting of a repeating pattern of long-dash</li>
<li>"longDashDot" - a line consisting of a repeating pattern of long-dash-dot</li>
<li>"longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot</li>
<li>"solid" - a solid line</li>
</ul>

<h4>Example - set the value axis note label border dash type</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          border: {
            dashType: "dashDot",
            width: 1
          }
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.label.border.width">
<a href="#configuration-valueAxis.notes.data.label.border.width">valueAxis.notes.data.label.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.</p>

<h4>Example - set the value axis note label border width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          border: {
            width: 1
          }
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.label.color">
<a href="#configuration-valueAxis.notes.data.label.color">valueAxis.notes.data.label.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the note label. Accepts a valid CSS color string, including hex and rgb.</p>

<h4>Example - set the value axis note label color as a hex string</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          color: "#aa00bb"
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.label.font">
<a href="#configuration-valueAxis.notes.data.label.font">valueAxis.notes.data.label.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "12px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The font style of the note label.</p>

<h4>Example - set the value axis note label font</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          font: "20px sans-serif"
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.label.template">
<a href="#configuration-valueAxis.notes.data.label.template">valueAxis.notes.data.label.template </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The <a href="/api/framework/kendo#methods-template">template</a> which renders the labels.</p>

<p>The fields which can be used in the template are:</p>

<ul>
<li>value - the axis value</li>
</ul>

<h4>Example - set the value axis note label template as a string</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          template: "Year: #: value #"
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.label.visible">
<a href="#configuration-valueAxis.notes.data.label.visible">valueAxis.notes.data.label.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: true)</em>
</h3>

<p>If set to <code>true</code> the chart will display the value axis notes label. By default the value axis notes label are visible.</p>

<h4>Example - hide the value axis note label</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          visible: false
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.label.rotation">
<a href="#configuration-valueAxis.notes.data.label.rotation">valueAxis.notes.data.label.rotation </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The rotation angle of the label. By default the label are not rotated.</p>

<h4>Example - rotate the value axis note label</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          rotation: 90
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.label.format">
<a href="#configuration-valueAxis.notes.data.label.format">valueAxis.notes.data.label.format </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "{0}")</em>
</h3>

<p>The format used to display the note label. Uses <a href="/api/framework/kendo#methods-format">kendo.format</a>. Contains one placeholder ("{0}") which represents the axis value.</p>

<h4>Example - set the value axis note label format</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          format: "value slot: {0}"
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.label.text">
<a href="#configuration-valueAxis.notes.data.label.text">valueAxis.notes.data.label.text </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The label note text.</p>

<h4>Example - set the value axis label note text</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          text: "A"
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.label.position">
<a href="#configuration-valueAxis.notes.data.label.position">valueAxis.notes.data.label.position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "inside")</em>
</h3>

<p>The position of the value axis note label.</p>

<ul>
<li>"inside" - the label is positioned inside of the icon.</li>
<li>"outside" - the label is positioned outside of the icon.</li>
</ul>

<h3 id="configuration-valueAxis.notes.data.line">
<a href="#configuration-valueAxis.notes.data.line">valueAxis.notes.data.line </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The line of the note.</p>

<h3 id="configuration-valueAxis.notes.data.line.width">
<a href="#configuration-valueAxis.notes.data.line.width">valueAxis.notes.data.line.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The line width of the note.</p>

<h4>Example - set the value axis note line width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        line: {
          width: 4
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.line.color">
<a href="#configuration-valueAxis.notes.data.line.color">valueAxis.notes.data.line.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The line color of the note.</p>

<h4>Example - set the value axis note color width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        line: {
          color: "#aa00bb"
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.line.length">
<a href="#configuration-valueAxis.notes.data.line.length">valueAxis.notes.data.line.length </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The length of the connecting lines in pixels.</p>

<h4>Example - set the value axis note color width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        line: {
          length: 20
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h2 id="fields"><a href="#fields">Fields</a></h2>

<h3 id="fields-navigator">
<a href="#fields-navigator">navigator </a><code>kendo.dataviz.Navigator</code>
</h3>

<p>A reference to the Stock Chart built-in <a href="/api/javascript/dataviz/navigator">navigator</a> instance (the lower widget pane). Obtain the instance to call the available <a href="/api/javascript/dataviz/navigator">navigator methods</a>.</p>

<blockquote>
<p><strong>Important</strong></p>

<p>The navigator field is available in Kendo UI v.2016.2.517 and later</p>
</blockquote>

<h2 id="methods"><a href="#methods">Methods</a></h2>

<h3 id="methods-destroy"><a href="#methods-destroy">destroy</a></h3>

<p>Prepares the widget for safe removal from DOM. Detaches all event handlers and removes jQuery.data attributes to avoid memory leaks. Calls destroy method of any child Kendo widgets.</p>

<blockquote>
<p>This method does not remove the widget element from DOM.</p>
</blockquote>

<h3 id="methods-exportImage"><a href="#methods-exportImage">exportImage</a></h3>

<p>Exports the chart as an image.</p>

<p>Inherited from <a href="chart#methods-exportImage">Chart.exportImage</a></p>

<h4>Parameters</h4>

<h5>options <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> <em>(optional)</em>
</h5>

<p>Parameters for the exported image.</p>

<h5>options.width <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>The width of the exported image. Defaults to the chart width.</p>

<h5>options.height <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>The height of the exported image. Defaults to the chart height.</p>

<h4>Returns</h4>

<p><a href="http://api.jquery.com/Types/#Promise" class="type-link"><code>Promise</code></a> A promise that will be resolved with a PNG image encoded as a Data URI.</p>

<h3 id="methods-exportPDF"><a href="#methods-exportPDF">exportPDF</a></h3>

<p>Exports the chart as a PDF file.</p>

<p>Inherited from <a href="chart#methods-exportPDF">Chart.exportPDF</a></p>

<h4>Parameters</h4>

<h5>options <a href="/api/javascript/drawing/pdfoptions" class="type-link"><code>kendo.drawing.PDFOptions</code></a> <em>(optional)</em>
</h5>

<p>Parameters for the exported PDF file.</p>

<h4>Returns</h4>

<p><a href="http://api.jquery.com/Types/#Promise" class="type-link"><code>Promise</code></a> A promise that will be resolved with a PDF file encoded as a Data URI.</p>

<h3 id="methods-exportSVG"><a href="#methods-exportSVG">exportSVG</a></h3>

<p>Exports the chart as an SVG document.</p>

<p>Inherited from <a href="chart#methods-exportSVG">Chart.exportSVG</a></p>

<h4>Parameters</h4>

<h5>options <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> <em>(optional)</em>
</h5>

<p>Export options.</p>

<h5>options.raw <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: false)</em>
</h5>

<p>Resolves the promise with the raw SVG document without the Data URI prefix.</p>

<h4>Returns</h4>

<p><a href="http://api.jquery.com/Types/#Promise" class="type-link"><code>Promise</code></a> A promise that will be resolved with a SVG document encoded as a Data URI.</p>

<h3 id="methods-redraw"><a href="#methods-redraw">redraw</a></h3>

<p>Repaints the chart using the currently loaded data.</p>

<h3 id="methods-refresh"><a href="#methods-refresh">refresh</a></h3>

<p>Reloads the data and renders the chart.</p>

<h3 id="methods-resize"><a href="#methods-resize">resize</a></h3>

<p>Adjusts the chart layout to match the size of the container.</p>

<h4>Parameters</h4>

<h5>force <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>optional</em>
</h5>

<p>Defines whether the widget should proceed with resizing even if the element dimensions have not changed.</p>

<h3 id="methods-setDataSource"><a href="#methods-setDataSource">setDataSource</a></h3>

<p>Sets the data source of the widget.</p>

<h4>Parameters</h4>

<h5>dataSource <a href="/api/javascript/data/datasource" class="type-link"><code>kendo.data.DataSource</code></a>
</h5>

<p>The data source to which the widget should be bound.</p>

<h3 id="methods-setOptions"><a href="#methods-setOptions">setOptions</a></h3>

<p>Sets the widget options. Changes are cumulative.</p>

<h4>Parameters</h4>

<h5>options <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The chart settings to update.</p>

<h3 id="methods-svg"><a href="#methods-svg">svg</a></h3>

<p>Returns the <a href="http://www.w3.org/Graphics/SVG/">SVG</a> representation of the chart.
The returned string is a self-contained SVG document that can be used as is or
converted to other formats using tools like <a href="http://inkscape.org/">Inkscape</a> and
<a href="http://www.imagemagick.org/">ImageMagick</a>.
Both programs provide command-line interface suitable for server-side processing.</p>

<blockquote>
<p>This method is obsoleted by <a href="#methods-exportSVG">exportSVG</a>, but will remain fully functional.</p>
</blockquote>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> the SVG representation of the chart.</p>

<h4>Example - get the SVG representation of the chart</h4>

<pre><code>&lt;div id="stock-chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#stock-chart").kendoStockChart({
    series: [{
      type: "line",
      field: "value",
      categoryField: "date",
      data: [
        { value: 1, date: new Date(2012, 1, 1) },
        { value: 2, date: new Date(2012, 1, 2) }
      ]
    }]
});

var chart = $("#stock-chart").data("kendoStockChart");
var svg = chart.svg();
console.log(svg); // displays the SVG string
&lt;/script&gt;
</code></pre>

<h3 id="methods-imageDataURL"><a href="#methods-imageDataURL">imageDataURL</a></h3>

<p>Returns a PNG image of the chart encoded as a <a href="https://developer.mozilla.org/en-US/docs/data_URIs">Data URL</a>.</p>

<blockquote>
<p>This method is deprecated and replaced by <a href="#methods-exportImage">exportImage</a>.</p>
</blockquote>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> A data URL with <code>image/png</code> MIME type. Will be <code>null</code> if the browser does not support the <code>canvas</code> element.</p>

<h4>Example - show a snapshot of the Chart</h4>

<pre><code>&lt;div id="stock-chart"&gt;&lt;/div&gt;
&lt;a download="export.png" id="export" class="k-button"&gt;Export PNG&lt;/a&gt;
&lt;script&gt;
$("#stock-chart").kendoStockChart({
    series: [{
      type: "line",
      field: "value",
      categoryField: "date",
      data: [
        { value: 1, date: new Date(2012, 1, 1) },
        { value: 2, date: new Date(2012, 1, 2) }
      ]
    }]
});

$("#export").on("click", function() {
  var chart = $("#stock-chart").data("kendoStockChart");
  var imageDataURL = chart.imageDataURL();

  if (navigator.msSaveBlob) {
    var blob = toBlob(imageDataURL, "image/png");
    navigator.msSaveBlob(blob, this.getAttribute("download"));
  } else {
    this.href = imageDataURL;
  }
});

// See: http://goo.gl/qlg5dd
function toBlob(base64, type) {
  var rawData = base64.substring(base64.indexOf("base64,") + 7);
  var data = atob(rawData);
  var arr = new Uint8Array(data.length);

  for (var i = 0; i &lt; data.length; ++i) {
    arr[i] = data.charCodeAt(i);
  }

  return new Blob([ arr.buffer ], { type: type });
}
&lt;/script&gt;
</code></pre>

<h2 id="events"><a href="#events">Events</a></h2>

<h3 id="events-axisLabelClick"><a href="#events-axisLabelClick">axisLabelClick</a></h3>

<p>Fires when an axis label is clicked.</p>

<h4>Example</h4>

<pre><code>function onAxisLabelClick(e) {
    alert("Clicked " + e.axis.type + " axis label with value: " + e.value);
}
</code></pre>

<h4>Event Data</h4>

<h5>e.axis <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The axis that the label belongs to.</p>

<h5>e.value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The label value or category name.</p>

<h5>e.text <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The label text.</p>

<h5>e.index <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The label sequential index or category index.</p>

<h5>e.dataItem <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The original data item used to generate the label.
** Applicable only for data bound category axis. **</p>

<h5>e.element <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The DOM element of the label.</p>

<h5>e.sender <code>kendo.dataviz.ui.StockChart</code>
</h5>

<p>The widget instance which fired the event.</p>

<h3 id="events-dataBound"><a href="#events-dataBound">dataBound</a></h3>

<p>Fires when the chart has received data from the data source
and is about to render it.</p>

<h4>Example</h4>

<pre><code>function onDataBound(e) {
    // Series data is now available
}
</code></pre>

<h3 id="events-dragStart"><a href="#events-dragStart">dragStart</a></h3>

<p>Fires when the user has used the mouse or a swipe gesture to drag the chart.</p>

<p>The drag operation can be aborted by calling <code>e.preventDefault()</code>.</p>

<h4>Event Data</h4>

<h5>e.axisRanges <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>A hastable containing the initial range (min and max values) of <em>named</em> axes.
The axis name is used as a key.</p>

<h5>e.originalEvent <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The original user event that triggered the drag action.</p>

<h5>e.sender <code>kendo.dataviz.ui.StockChart</code>
</h5>

<p>The widget instance which fired the event.</p>

<h3 id="events-drag"><a href="#events-drag">drag</a></h3>

<p>Fires as long as the user is dragging the chart using the mouse or swipe gestures.</p>

<h4>Event Data</h4>

<h5>e.axisRanges <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>A hastable containing the suggested current range (min and max values) of <em>named</em> axes.
The axis name is used as a key.</p>

<p>Note that the axis ranges are not updated automatically. You need to call
set_options with either the suggested or custom min/max values for them to take effect.</p>

<h5>e.originalEvent <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The original user event that triggered the drag action.</p>

<h5>e.sender <code>kendo.dataviz.ui.StockChart</code>
</h5>

<p>The widget instance which fired the event.</p>

<h3 id="events-dragEnd"><a href="#events-dragEnd">dragEnd</a></h3>

<p>Fires when the user stops dragging the chart.</p>

<h4>Event Data</h4>

<h5>e.axisRanges <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>A hastable containing the final range (min and max values) of <em>named</em> axes.
The axis name is used as a key.</p>

<h5>e.originalEvent <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The original user event that triggered the drag action.</p>

<h5>e.sender <code>kendo.dataviz.ui.StockChart</code>
</h5>

<p>The widget instance which fired the event.</p>

<h3 id="events-legendItemClick"><a href="#events-legendItemClick">legendItemClick</a></h3>

<p>Fires when an legend item is clicked, before the selected series visibility is toggled.
Can be cancelled.</p>

<h4>Example - prevent toggling the series visibility on legend item click</h4>

<pre><code>function onLegendItemClick(e) {
    e.preventDefault();
}
</code></pre>

<h4>Event Data</h4>

<h5>e.text <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>The name of the series.</p>

<h5>e.series <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The series options.</p>

<h5>e.seriesIndex <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h5>

<p>The series index.</p>

<h5>e.pointIndex <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h5>

<p>The point index.</p>

<h5>e.preventDefault <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h5>

<p>If invoked the default action (toggle series visibility) will be prevented.</p>

<h5>e.element <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The DOM element of the plot area.</p>

<h5>e.sender <code>kendo.dataviz.ui.StockChart</code>
</h5>

<p>The widget instance which fired the event.</p>

<h3 id="events-legendItemHover"><a href="#events-legendItemHover">legendItemHover</a></h3>

<p>Fires when an legend item is hovered.</p>

<h4>Example</h4>

<pre><code>function onLegendItemHover(e) {
    alert("Hovered " + e.text + " series");
}
</code></pre>

<h4>Event Data</h4>

<h5>e.text <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>The name of the series.</p>

<h5>e.series <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The series options.</p>

<h5>e.seriesIndex <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h5>

<p>The series index.</p>

<h5>e.pointIndex <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h5>

<p>The point index.</p>

<h5>e.element <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The DOM element of the plot area.</p>

<h5>e.sender <code>kendo.dataviz.ui.StockChart</code>
</h5>

<p>The widget instance which fired the event.</p>

<h3 id="events-noteClick"><a href="#events-noteClick">noteClick</a></h3>

<p>Fired when the user clicks one of the notes.</p>

<p>The event handler function context (available via the <code>this</code> keyword) will be set to the widget instance.</p>

<h4>Event Data</h4>

<h5>e.category <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The data point category. Available only for categorical charts (bar, line, area and similar).</p>

<h5>e.element <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The DOM element of the plot area.</p>

<h5>e.sender <code>kendo.dataviz.ui.StockChart</code>
</h5>

<p>The widget instance which fired the event.</p>

<h5>e.value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The data point value.</p>

<h5>e.series <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The series of the note.</p>

<h5>e.dataItem <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The data item of the point's note.</p>

<h5>e.sender <code>kendo.dataviz.ui.StockChart</code>
</h5>

<p>The widget instance which fired the event.</p>

<h3 id="events-noteHover"><a href="#events-noteHover">noteHover</a></h3>

<p>Fired when the user hovers one of the notes.</p>

<p>The event handler function context (available via the <code>this</code> keyword) will be set to the widget instance.</p>

<h4>Event Data</h4>

<h5>e.category <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The data point category. Available only for categorical charts (bar, line, area and similar).</p>

<h5>e.element <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The DOM element of the plot area.</p>

<h5>e.sender <code>kendo.dataviz.ui.StockChart</code>
</h5>

<p>The widget instance which fired the event.</p>

<h5>e.value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The data point value.</p>

<h5>e.series <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The series of the note.</p>

<h5>e.dataItem <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The data item of the point's note.</p>

<h5>e.sender <code>kendo.dataviz.ui.StockChart</code>
</h5>

<p>The widget instance which fired the event.</p>

<h3 id="events-plotAreaClick"><a href="#events-plotAreaClick">plotAreaClick</a></h3>

<p>Fires when plot area is clicked.</p>

<h4>Example</h4>

<pre><code>function onPlotAreaClick(e) {
    alert("Clicked X axis value: " + e.x);
}
</code></pre>

<h4>Event Data</h4>

<h5>e.value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The data point value.
Available only for categorical charts (bar, line, area and similar).</p>

<h5>e.category <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The data point category.
Available only for categorical charts (bar, line, area and similar).</p>

<h5>e.element <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The DOM element of the plot area.</p>

<h5>e.x <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The X axis value or array of values for multi-axis charts.</p>

<h5>e.y <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The Y axis value or array of values for multi-axis charts.</p>

<h5>e.sender <code>kendo.dataviz.ui.StockChart</code>
</h5>

<p>The widget instance which fired the event.</p>

<h3 id="events-plotAreaHover"><a href="#events-plotAreaHover">plotAreaHover</a></h3>

<p>Fired when the user hovers the plot area.</p>

<h4>Event Data</h4>

<h5>e.category <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The data point category. Available only for categorical charts (bar, line, area and similar).</p>

<h5>e.element <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The DOM element of the plot area.</p>

<h5>e.sender <code>kendo.dataviz.ui.StockChart</code>
</h5>

<p>The widget instance which fired the event.</p>

<h5>e.originalEvent <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The original browser event that triggered the hover action.</p>

<h5>e.value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The data point value. Available only for categorical charts (bar, line, area and similar).</p>

<h5>e.x <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The X axis value or array of values for multi-axis charts.</p>

<h5>e.y <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The Y axis value or array of values for multi-axis charts.</p>

<h5>e.sender <code>kendo.dataviz.ui.StockChart</code>
</h5>

<p>The widget instance which fired the event.</p>

<h3 id="events-render"><a href="#events-render">render</a></h3>

<p>Fired when the chart is ready to render on screen.</p>

<p>Can be used, for example, to remove loading indicators. Changes to options will be ignored.</p>

<p>The event handler function context (available via the <code>this</code> keyword) will be set to the widget instance.</p>

<h4>Event Data</h4>

<h5>e.sender <code>kendo.dataviz.ui.StockChart</code>
</h5>

<p>The widget instance which fired the event.</p>

<h3 id="events-select"><a href="#events-select">select</a></h3>

<p>Fired when the user modifies the selection.</p>

<p>The event handler function context (available via the <code>this</code> keyword) will be set to the widget instance.</p>

<h4>Event Data</h4>

<h5>e.axis <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The target axis configuration.</p>

<h5>e.from <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" class="type-link"><code>Date</code></a>
</h5>

<p>The lower boundary of the selected range.</p>

<h5>e.sender <code>kendo.dataviz.ui.StockChart</code>
</h5>

<p>The widget instance which fired the event.</p>

<h5>e.to <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" class="type-link"><code>Date</code></a>
</h5>

<p>The upper boundary of the selected range.</p>

<p>The last selected category is at index [to - 1] unless the axis is justified. In this case it is at index [to].</p>

<h3 id="events-selectEnd"><a href="#events-selectEnd">selectEnd</a></h3>

<p>Fired when the user completes modifying the selection.</p>

<p>The event handler function context (available via the <code>this</code> keyword) will be set to the widget instance.</p>

<h4>Event Data</h4>

<h5>e.axis <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The target axis configuration.</p>

<h5>e.from <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" class="type-link"><code>Date</code></a>
</h5>

<p>The lower boundary of the selected range.</p>

<h5>e.sender <code>kendo.dataviz.ui.StockChart</code>
</h5>

<p>The widget instance which fired the event.</p>

<h5>e.to <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" class="type-link"><code>Date</code></a>
</h5>

<p>The upper boundary of the selected range.</p>

<p>The last selected category is at index [to - 1] unless the axis is justified. In this case it is at index [to].</p>

<h3 id="events-selectStart"><a href="#events-selectStart">selectStart</a></h3>

<p>Fired when the user starts modifying the axis selection.</p>

<p>The event handler function context (available via the <code>this</code> keyword) will be set to the widget instance.</p>

<h4>Event Data</h4>

<h5>e.axis <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The target axis configuration.</p>

<h5>e.from <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" class="type-link"><code>Date</code></a>
</h5>

<p>The lower boundary of the selected range.</p>

<h5>e.sender <code>kendo.dataviz.ui.StockChart</code>
</h5>

<p>The widget instance which fired the event.</p>

<h5>e.to <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" class="type-link"><code>Date</code></a>
</h5>

<p>The upper boundary of the selected range.</p>

<p>The last selected category is at index [to - 1] unless the axis is justified. In this case it is at index [to].</p>

<h3 id="events-seriesClick"><a href="#events-seriesClick">seriesClick</a></h3>

<p>Fires when chart series are clicked.</p>

<h4>Example</h4>

<pre><code>function onSeriesClick(e) {
    alert("Clicked value: " + e.value);
}
</code></pre>

<h4>Event Data</h4>

<h5>e.value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The data point value.</p>

<h5>e.category <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The data point category</p>

<h5>e.series <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The clicked series.</p>

<h5>e.series.type <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>The series type</p>

<h5>e.series.name <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>The series name</p>

<h5>e.series.data <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h5>

<p>The series data points</p>

<h5>e.dataItem <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The original data item (when binding to dataSource).</p>

<h5>e.element <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The DOM element of the data point.</p>

<h5>e.percentage <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The point value represented as a percentage value. Available only for donut, pie and 100% stacked charts.</p>

<h5>e.sender <code>kendo.dataviz.ui.StockChart</code>
</h5>

<p>The widget instance which fired the event.</p>

<h3 id="events-seriesHover"><a href="#events-seriesHover">seriesHover</a></h3>

<p>Fires when chart series are hovered.</p>

<h4>Example</h4>

<pre><code>function onSeriesHover(e) {
    alert("Hovered value: " + e.value);
}
</code></pre>

<h4>Event Data</h4>

<h5>e.value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The data point value.</p>

<h5>e.category <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The data point category</p>

<h5>e.series <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The clicked series.</p>

<h5>e.series.type <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>The series type</p>

<h5>e.series.name <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>The series name</p>

<h5>e.series.data <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h5>

<p>The series data points</p>

<h5>e.dataItem <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The original data item (when binding to dataSource).</p>

<h5>e.element <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The DOM element of the data point.</p>

<h5>e.percentage <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The point value represented as a percentage value. Available only for donut, pie and 100% stacked charts.</p>

<h5>e.sender <code>kendo.dataviz.ui.StockChart</code>
</h5>

<p>The widget instance which fired the event.</p>

<h3 id="events-zoomStart"><a href="#events-zoomStart">zoomStart</a></h3>

<p>Fires when the user has used the mousewheel to zoom the chart.</p>

<p>The zoom operation can be aborted by calling <code>e.preventDefault()</code>.</p>

<h4>Event Data</h4>

<h5>e.axisRanges <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>A hastable containing the initial range (min and max values) of <em>named</em> axes.
The axis name is used as a key.</p>

<h5>e.originalEvent <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The original user event that triggered the zoom action.</p>

<h5>e.sender <code>kendo.dataviz.ui.StockChart</code>
</h5>

<p>The widget instance which fired the event.</p>

<h3 id="events-zoom"><a href="#events-zoom">zoom</a></h3>

<p>Fires as long as the user is zooming the chart using the mousewheel.</p>

<h4>Event Data</h4>

<h5>e.axisRanges <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>A hastable containing the suggested current range (min and max values) of <em>named</em> axes.
The axis name is used as a key.</p>

<p>Note that the axis ranges are not updated automatically. You need to call
set_options with either the suggested or custom min/max values for them to take effect.</p>

<h5>e.delta <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h5>

<p>A number that indicates the zoom amount and direction.</p>

<p>A negative delta indicates "zoom in", while a positive "zoom out".</p>

<h5>e.originalEvent <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The original user event that triggered the zoom action.</p>

<p>This event can be used to prevent the default mousewheel action (scroll).</p>

<h4>Example</h4>

<pre><code>function onZoom(e) {
    // Prevent window scroll
    e.originalEvent.preventDefault();
}
</code></pre>

<h5>e.sender <code>kendo.dataviz.ui.StockChart</code>
</h5>

<p>The widget instance which fired the event.</p>

<h3 id="events-zoomEnd"><a href="#events-zoomEnd">zoomEnd</a></h3>

<p>Fires when the user stops zooming the chart.</p>

<h4>Event Data</h4>

<h5>e.axisRanges <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>A hastable containing the final range (min and max values) of <em>named</em> axes.
The axis name is used as a key.</p>

<h5>e.originalEvent <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The original user event that triggered the zoom action.</p>

<h5>e.sender <code>kendo.dataviz.ui.StockChart</code>
</h5>

<p>The widget instance which fired the event.</p> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

